我已经初始化了一个数组状态,当我更新它时,我的组件不会重新渲染。这是一个最小的概念验证:
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 组件不会重新渲染。但是,如果我在 5 秒后执行的 onChange 函数中添加 setTimeout,则表明数字确实已更新。
关于为什么组件不更新的任何想法?
这是一个带有概念证明的CodeSandbox 。
您正在调用setNumbers并传递它已经拥有的数组。你已经改变了它的一个值,但它仍然是同一个数组,我怀疑 React 没有看到任何重新渲染的理由,因为状态没有改变;新数组是旧数组。
setNumbers
避免这种情况的一种简单方法是将数组传播到一个新数组中:
setNumbers([...old])