我已经初始化了一个数组状态，当我更新它时，我的组件不会重新呈现。下面是一个最小的概念证明:
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函数中添加了一个setTimeout，它在5秒后执行，它显示数字确实已经更新。
对于组件不更新的原因有什么想法吗?
这里是一个概念验证的代码和框。
useState是一个React钩子，它提供了在函数组件中拥有State的功能。
通常，当useState变量发生变化时，它会通知React重新呈现组件。
{
let old = numbers;
old[0] = 1;
setNumbers(old);
}
在上面的代码中，由于你引用的是同一个变量，它存储的是引用而不是值，因此React不知道最新的变化，因为引用与之前的相同。
为了克服使用下面的hack，它不会复制引用，而是一个深度复制(复制值)
{
let old = JSON.parse(JSON.stringify(numbers));
old[0] = 1;
setNumbers(old);
}
快乐编码:)
我正在处理一个数组，其中有对象，我尝试了上面的几个。
我的财产是:
const [options, setOptions] = useState([
{ sno: "1", text: "" },
{ sno: "2", text: "" },
{ sno: "3", text: "" },
{ sno: "4", text: "" },
]);
现在我想在点击按钮时添加更多空白字段的选项，我会使用以下方式来实现我的目的:
<button
onClick={() => {
setOptions([...options, { sno: newArray.length + 1, text: "" }]);
}}
>
这解决了我的问题，我能够重新渲染组件，并添加一个对象到数组。
引入组件的一个数组，该数组不是钩子的数组。例如:
const [numbers, setNumbers] = useState([0, 1, 2, 3]);
var numbersModify = []; //the value you want
最后:
setNumbers(numbersModify)
修改这个numbersModify，当钩子刷新时，它将返回0 numbersModify，钩子将保持这个状态。因此，看不到更改的问题将被消除。
:D
