我试图理解以下涉及 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.length0。但是，仍会调用console.log，这意味着在组件重新呈现后，实际上会恢复执行顺序。
这是怎么回事？filteredArr究竟什么时候定型？
要记住的是：所有状态变量都是局部变量。它们仅在组件渲染的这个特定时间内存在。因此，在第一次渲染中，console.log("filtered arr length", filteredArr.length);指的是第一个渲染中存在的数组。filteredArr永远不会被分配一个新数组(它不能，它是一个常量(，除非你改变数组(你不应该(，否则该数组的长度将始终为 0。
当你调用 setFilteredArr 时，这会指示 react 重新渲染组件。React 可能会同步进行渲染，或者可能会等待尝试批量更改。当第二次渲染发生时，您调用 useState 并取回新值。这是分配给一个名为filteredArr的局部变量，但这是一个与我们在第一次渲染时完全不同的变量。控制台.log第一次渲染中的语句将无法访问第二次渲染中的变量。但是第二个渲染可以访问它，因此您第二次执行的任何日志记录都将显示第二个数组。
setState或'setFilteredLength'是一个异步操作。调用它后，需要一些时间来更新状态(因为它是异步的，它不会等待该更新。它将简单地执行下一行(所以当它执行控制台时.log值还没有改变 ->