React使用Context API实现搜索筛选初始加载无数据问题咨询

问题根源 #

你遇到的问题和状态更新的触发逻辑有关，核心有两处错误：

1. filteredCoins 局部状态没有响应全局 coins 的更新
   TableCoins 组件里初始化 const [filteredCoins, setfilteredCoins] = useState(coins); 的时候，getData 的异步请求还没有返回结果，全局 coins 还是初始的空数组，所以 filteredCoins 初始值就是空数组。后续全局 coins 加载完成更新后，局部的 filteredCoins 没有监听这个变化，不会自动更新。
2. SearchBar 中的过滤触发逻辑缺失依赖
   SearchBar 里的 useEffect 依赖数组只有 search，全局 coins 更新时不会触发这个 effect 执行过滤逻辑，只有修改 search 的时候才会触发过滤，所以这时候才会把最新的 coins 传入过滤函数，数据才显示出来。

修复方案 #

只需要修改两处代码即可：

1. 修改 SearchBar.js 的 useEffect 依赖，添加 coins

这样当全局 coins 加载完成更新时，会自动触发过滤逻辑：

// SearchBar.js
useEffect(() => {
  handleFilterCoins(coins, search);
}, [search, coins]); // 增加coins作为依赖

2. 可选优化：在 TableCoins 中监听 coins 变化同步更新过滤列表

即使不修改SearchBar，也可以在TableCoins中直接监听coins变化，当coins更新时直接更新过滤列表：

// TableCoins.js
useEffect(() => {
  setfilteredCoins(coins);
}, [coins]);

你修改后的版本能正常运行，是因为你把 filteredCoins 改成了直接通过 coins.filter 实时计算的派生值，而不是存在局部state里，每次组件重渲染都会用最新的coins和search值计算，所以不会出现不同步的问题，这种写法没有额外的状态同步成本，更推荐使用。

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