React Hook 的状态究竟是什么时候设置的？答案

【问题标题】：When exactly do React Hook states get set?React Hook 的状态究竟是什么时候设置的？
【发布时间】：2020-01-27 04:37:22
【问题描述】：

我正在尝试了解以下涉及 React Hook 状态的代码的执行顺序：

const App = () => {
  const [ searchedCountry, setSearchedCountry ] = useState(''); 
  const [ filteredArr, setFilteredArr ]  = useState([]); 
  const [ filteredLength, setFilteredLength ] = useState(0);

  //...

  const filterCountries = (event) => { 
    event.preventDefault();

    setFilteredArr(countries.filter(country => country.name.includes(searchedCountry)));  
    setFilteredLength(filteredArr.length); 
    console.log("filtered arr length", filtered.length);
  }

  //...
}

当filterCountries 被触发时，setFilteredArr 将状态filteredArr 设置为由查询过滤的数组。但是，filteredArr 究竟什么时候被设置？

filteredArr.length 返回0，表示filteredArr 尚未设置，即使在调用setFilteredArr 之后也是如此。

一开始我以为通过执行setFilteredArr，组件会重新渲染，导致执行跳过setFilteredArr之后的方法调用。这可以解释为什么filteredArr.length 是0。但是，console.log 仍然被调用，这意味着组件重新渲染后，执行顺序实际上是恢复的。

发生了什么事？ filteredArr 究竟什么时候被设置？

【问题讨论】：

标签： reactjs rendering state react-hooks rerender

【解决方案1】：

要记住的是：所有状态变量都是局部变量。它们仅在组件呈现的特定时间存在。所以在第一次渲染时，console.log("filtered arr length", filteredArr.length); 指的是第一次渲染中存在的数组。 filteredArr 永远不会被分配一个新数组（它不能，它是一个 const），除非你改变数组（你不应该），否则该数组的长度将始终为 0。

当您调用 setFilteredArr 时，这会指示 react 重新渲染组件。 React 可能会同步进行渲染，或者它可能会等待尝试批量更改。当第二次渲染发生时，您调用 useState 并取回新值。这被分配给一个名为 filtersArr 的局部变量，但这是一个与我们在第一次渲染中使用的变量完全不同的变量。第一次渲染中的 console.log 语句将无法访问第二次渲染中的变量。但是第二次渲染可以访问它，因此您第二次执行的任何日志记录都将显示第二个数组。

【讨论】：

你是说状态修改函数一调用就设置了一个状态，但是在当前渲染时，直到下一次渲染才能访问新状态？我仍然很难遵循执行顺序。
我是说执行顺序是一条红鲱鱼。每次渲染组件时，它都会创建一组全新的局部变量。有一个新的filteredArr 变量和一个新的filteredCountries 函数。该函数从这个渲染中“关闭”filteredArr 变量。换句话说，filteredCountries 函数中的代码只能访问此特定渲染中存在的变量。它无法访问将在组件下次呈现时创建的变量。

【解决方案2】：

setState 或 'setFilteredLength' 是异步操作。在你调用它之后，更新状态需要一些时间（因为它是异步的，它不会等待更新。它只会执行下一行）所以当它执行时 console.log 值没有改变 - > 还

【讨论】：