如何将Redux useSelector获取的数据传递给React useState钩子？

你遇到的问题核心是useState的初始值仅在组件首次挂载时生效一次：

• 组件第一次渲染时，Redux store里的球员数据大概率还没完成加载，此时传给useState的初始值是空/未定义状态
• 后续Redux异步拉取到JSON数据更新store后，组件虽然会因为useSelector拿到新的players触发重渲染，但useState不会再重新读取初始值，所以本地的playerData一直保留第一次挂载时的空值，打印自然没有数据。

根据你的实际使用场景二选一即可：

方案1：不需要本地修改数据时，直接使用Redux返回值（推荐） #

如果你不需要对拿到的球员数据做仅当前组件生效的本地修改，完全没必要额外用useState存一份冗余状态，直接使用useSelector返回的players即可，Redux会在数据更新时自动触发组件重渲染，拿到最新值：

// 直接使用即可，无需额外包一层useState
const players = useSelector(getPlayers);

console.log(players); // 永远是store里的最新值

这种写法避免了同一份数据存在两个状态源导致的不同步问题，也是Redux官方推荐的用法。

方案2：需要本地修改数据时，用useEffect做同步 #

如果你确实需要基于Redux的球员数据做本地临时修改（比如表单编辑、本地筛选排序不修改全局store），就用useEffect监听Redux返回的players变化，同步更新本地状态：

const players = useSelector(getPlayers);
const [playerData, setPlayerData] = useState(players);

// 当Redux中的players更新时，同步更新本地state
useEffect(() => {
  setPlayerData(players);
}, [players]);

注意：如果你的getPlayers selector没有做记忆化处理，每次返回的是新创建的数组/对象引用，可能会触发不必要的重渲染甚至死循环，这种情况可以给useSelector传入浅比较参数，或者用reselect创建记忆化selector即可，直接返回store中已有字段的简单selector不会有这个问题。

内容的提问来源于stack exchange，提问作者Tapesh Patel