使用钩子更新React中的数组
使用钩子更新React中的数组
提问于 2019-02-19 23:53:32
我正在尝试弄清楚React Hook API的工作原理。我正在尝试向列表中添加一个数字。我注释的代码，即myArray.push..。似乎没有执行该操作，尽管下面的代码运行良好。为甚麽呢？
import React, {useState} from 'react'
export default () => {
const [myArray, setArray] = useState([1,2,3])
return (
<div>
{myArray.map((item=>{
return <li>{item}</li>
}))}
<button onClick = {()=>{
// myArray.push(myArray[myArray.length-1]+1)
// setArray(myArray)
setArray([...myArray, myArray[myArray.length-1]+1])
}}>Add</button>
</div>
)
}回答 3
Stack Overflow用户
回答已采纳
发布于 2019-02-20 00:35:25
我建议对任何比单个值更复杂的情况使用useReducer。
function App() {
const [input, setInput] = useState(0);
const [myArray, dispatch] = useReducer((myArray, { type, value }) => {
switch (type) {
case "add":
return [...myArray, value];
case "remove":
return myArray.filter((_, index) => index !== value);
default:
return myArray;
}
}, [1, 2, 3]);
return (
<div>
<input value={input} onInput={e => setInput(e.target.value)} />
<button onClick={() => dispatch({ type: "add", value: input})}>
Add
</button>
{myArray.map((item, index) => (
<div>
<h2>
{item}
<button onClick={() => dispatch({ type: "remove", value: index })}>
Remove
</button>
</h2>
</div>
))}
</div>
);
}Stack Overflow用户
发布于 2019-02-20 00:19:29
你没有在注释代码中改变数组，因此当你尝试setState时，钩子会在内部检查由于引用没有更新myArray而传递的相同状态，因此不会再次触发重新呈现。
然而，在工作代码中，您正在创建一个新的数组实例，因此更新工作正常
Stack Overflow用户
发布于 2020-11-27 01:34:47
您可以使用way to deep clone an object并将其用作临时变量来更改数组的值。
下面是你的代码的例子：
import React, { useState } from 'react'
export default () => {
const [myArray, setArray] = useState([1, 2, 3])
var tmpArray = JSON.parse(JSON.stringify(myArray))
return (
<div>
{myArray.map((item) => {
return <li>{item}</li>
})}
<button
onClick={() => {
tmpArray.push(tmpArray[tmpArray.length - 1] + 1)
setArray(tmpArray)
}}
>
Add
</button>
</div>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54770234
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号