useState在添加prevState时多次激发

Question

我试图获取Event值，然后将该值添加到新的Array中，但useState值多次触发，有解决方案吗？

const [receivedItems, setReceivedItems] = useState([]);
const [newItems, setNewItems] = useState([]);
//Get selected value
const handleSelected = (e) => {
setReceivedItems(e);
};
useEffect(() => {
setNewItems((prevState) => [...prevState, receivedItems]);
}, [receivedItems]);

结果：

// first render // newItem
// second render // 2 newItem

Answer 1

useEffect挂钩总是在初始渲染开始时再次运行。在您的情况下，它运行：一个-用于初始渲染，两个-用于实际状态更新。

但是：如果您看到useEffect总是被调用两次，而不仅仅是第一次渲染，那么这可能是因为您的index.js中有React.StrictMode。请参阅此链接。

同时更改这一行：

setNewItems((prevState) => [...prevState, receivedItems]);

对此：

setNewItems((prevState) => [...prevState, ...receivedItems]);

您需要从receivedItems数组中提取元素，以便正确添加它们。