React执行设置状态两次，尽管调用了一次

Question

当我尝试使用以前的状态更新数组时，set状态将被执行两次。

const [countries,setCountries] = useState(["usa","china","russia"])
const [updated, setUpdated] = useState(0)
const updateCountries = () => {
console.log("I should be printed once and being printed ONCE")
setCountries(previous => {
console.log("I should be printed once but being printed TWICE")
return previous.map(country => {
setUpdated(prev => prev+1)
return country
});
})
console.log(updated)
// 6
}

使用当前状态修复此问题：

const updateCountries = () => {
console.log("I should be printed once and being printed ONCE")
setCountries(countries.map(country => {
setUpdated(prev => prev+1)
return country
}))
console.log(updated)
// 3
}

在使用以前的状态时，我是否缺少一些react规则？

更新：我无法在其他react组件中重现这种行为。因此，可能是组件的其他代码触发了这种意外行为。

Answer 1

如果没有完整的代码，很难说100%，但您的代码似乎会触发重新发布，这就是setCountrys运行两次的原因。它不应该与数组有任何关系，而应该与运行事物的序列有任何关系。

如果你把setCountry和setCountrys放在useEffect之外，你很可能会触发无限次你不想要的重发。

你可能想要的是下面的代码：

import React, { useState } from 'react';
function App() {
const [countries, setCountries] = useState(['usa','china','russia']);
const [country, setCountry] = useState('');
const handleClick = () => {
setCountries(previous => {
console.log("I should be printed once and I am printed once", previous);
const newArray = [...previous];
newArray.push(country);
return newArray;
});
}
return (
<div className="App">
<input type="text" onChange={(e) => setCountry(e.target.value)} value={country} />
<button onClick={handleClick}>Add Country</button>
<ul>
{countries && countries.map(c => <li key={c}>{c}</li>)}
</ul>
</div>
);
}
export default App;

Answer 2

因为您的代码导致对组件进行2次重新渲染。一个带有setCountry，第二个带有setCountries。