Question

我仍在努力思考 react 处理渲染的方式，这种特殊的行为让我整天挠头。当我运行此代码时，我得到 3 个控制台日志。第一个是空值，正如预期的那样，因为 useEffect 还没有运行。接下来，我按预期从我的 api 调用中获取了获取的 worldData 数组。但是，然后我获得了具有相同所述数组的第三个控制台日志，这让我相信我的组件正在被重新渲染。如果我添加另一个设置状态和另一个 api 调用，我会看到另一个控制台日志。

function App() {

  const [worldData, setWorldData] = useState(null)
  const [countriesData, setCountriesData] = useState(null)
  
  useEffect(() => {
    const fetchData = async () => {
      const [world, countries] = await Promise.all([
        fetch("https://disease.sh/v3/covid-19/countries?yesterday=true").then(res => res.json()),
        fetch("https://disease.sh/v3/covid-19/all?yesterday=true").then(res => res.json())
      ])
      .catch((err) => {
        console.log(err)
      })
      setWorldData(world)
      setCountriesData(countries)
    }
    fetchData();
  }, []);
  
  console.log(worldData);

每次我设置一个状态时，react 似乎都在渲染，这就是我认为它的设计目的。但是，我在其他地方读过，当在 useEffect 中设置在一起时，将多个设置状态一起反应批处理。那么为什么我的设置状态没有被批处理呢？是因为异步代码吗？如果是这样，有没有办法可以获取多个端点并同时设置所有检索到的数据，以便我的组件只需要重新渲染一次？

Answer 1

一点点

(1) 如果你只关心有一个单一的状态更新，那么你可以定义一个单一的状态并更新它

const [fetched_data, updateFetchedData] = useState({world:null, countries:null});
...
// where *world* and *countries* are variables containing your fetched data
updateFetchedData({world, countries})
...
fetched_data.world // using the fetched data somewhere

(2) 但是，您的代码不应该关心接收多个更新，而应该满足它...

你的 useState 应该定义一个空的结果会是什么样子，例如而不是

const [worldData, setWorldData] = useState(null); // probably shouldn't look like this

怎么样

const [worldData, setWorldData] = useState([]); // this is what an empty result set looks like

在使用 world 和 countries 数据的任何组件中（我假设一个引用另一个，这就是为什么你想要同时更新），只需放置一个条件声明，如果未找到，则在加载之前放入一些字符串 'Loading' 或 'NA' 或其他任何内容。

如何对从 useEffect 获取的数据批量反应多个 setStates？

1 个答案: