我初始化了一个状态,它是一个数组,但是当我更新它时,我的组件不会重新渲染。这里是一个最简单的证明:
function App() {
const [numbers, setNumbers] = React.useState([0, 1, 2, 3]);
console.log("rendering...");
return (
<div className="App">
{numbers.map(number => (
<p>{number}</p>
))}
<input
type="text"
value={numbers[0].toString()}
onChange={newText => {
let old = numbers;
old[0] = 1;
setNumbers(old);
}}
/>
</div>
);
}
基于这段代码,似乎输入应该包含数字0以启动,并且每次更改后状态也应该随之更改。在输入框中输入“02”后,App组件没有重新渲染。但是,如果我在onChange函数中添加一个在5秒后执行的setTimeout,它会显示numbers确实已经更新。对于组件为什么不更新有什么想法吗?
这里是证明概念的CodeSandbox。