为什么更新列表不会触发组件的重新呈现？

Question

给定下面的代码，当我单击按钮时，我希望看到一个新的列表项添加到中。状态数据似乎已更新，但DOM没有更改。我承认自己是React和Hooks的新手，所以希望这只是我不理解这里的绑定模型的问题。

import React, {useState,useEffect} from 'react';
import './App.css';
function App() {
const [someList, setSomeList] = useState([]);
useEffect(() =>
{
const someDataForTheList = [1,2,3];
setSomeList(someDataForTheList);
}, []);
const onClickAddToList = () =>
{
let newDataForTheList = someList;
newDataForTheList.push(someList.length + 1);
setSomeList(newDataForTheList);
console.log(someList);
}
return (
<div className="App">
<h1>{someList ? someList.length : null}</h1>
<ul>
{someList ? someList.map((i) =>
<li key={i}>
{i}
</li>)
: null}
</ul>
<button onClick={onClickAddToList}>Add to list</button>
</div>
);
}
export default App;

Answer 1

这是因为react在检查更新时不进行深度检查(默认情况下(。因此，在同一列表上推送一个新项目，然后使用钩子的调度方法React再次分配它，就会确定这是同一个对象/项目，从而得出不必更新视图的结论。

但是，您可以执行以下操作：

const onClickAddToList = () => {
// creating a new list
const newDataForTheList = [...someList, someList.length + 1];
setSomeList(newDataForTheList)
}