react 只更新数组里某个值_@程序员，React 使用如何避坑？

@程序员，如何更好地写React？

作者 | Alex K

译者 | 苏本如，责编 | 郭芮

出品 | CSDN(ID：CSDNnews)

以下为译文：

在Stack Overflow上回答与React框架相关的问题时，我注意到人们对于这个框架有几类主要的问题。我决定将一些最常见的问题和如何处理这些问题的解决方法写出来，以期对那些还不熟悉React框架的人，或那些正在努力掌握其基本概念的人有所帮助。在本文中，对于使用基于类组件和使用钩子(hook)的函数组件遇到的问题，都会交叉谈到。

直接修改状态

React中的状态被认为是不可变的，因此不应该直接修改。如果要修改状态值，应该使用一个特殊的setState方法和useState钩子中的setter函数。考虑下面的例子，在这个例子中，你希望根据复选框(checkbox)的状态更新数组中特定对象的checked字段。

 const updateFeaturesList = (e, idx) => {
   
listFeatures[idx].checked = e.target.checked;
setListFeatures(listFeatures);
};

这段代码的问题在于，对状态的更改不会反映到UI中，因为状态更新使用了相同的对象引用，因此不会触发重新渲染(re-render)动作。不能直接改变状态的另一个重要原因是，由于它的异步特性，后面的状态更新可能会覆盖直接对状态所做的更新，从而导致一些无法查清的错误。在这种情况下，正确的方法是使用useState的setter方法。

 const upda