我已经初始化了一个数组状态,当我更新它时,我的组件不会重新呈现。下面是一个最小的概念证明:
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秒后执行,它显示数字确实已经更新。
对于组件不更新的原因有什么想法吗?
这里是一个概念验证的代码和框。
引入组件的一个数组,该数组不是钩子的数组。例如:
const [numbers, setNumbers] = useState([0, 1, 2, 3]);
var numbersModify = []; //the value you want
最后:
setNumbers(numbersModify)
修改这个numbersModify,当钩子刷新时,它将返回0 numbersModify,钩子将保持这个状态。因此,看不到更改的问题将被消除。
:D
我正在处理一个数组,其中有对象,我尝试了上面的几个。
我的财产是:
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