javascript - React Hooks setState 数组中的元素
问题描述
如何更新状态数组中的单个元素?这是我目前正在使用的代码:
const Cars = props => {
const [cars, setCars] = React.useState(["Honda","Toyota","Dodge"])
const handleClick1 = () => { setCars[0]("Jeep") }
const handleClick2 = () => { setCars[1]("Jeep") }
const handleClick3 = () => { setCars[2]("Jeep") }
return (
<div>
<button onClick={handleClick1}>{cars[0]}</button>
<button onClick={handleClick2}>{cars[1]}</button>
<button onClick={handleClick3}>{cars[2]}</button>
</div>
)
};
当我单击其中一个呈现的按钮时,我得到Uncaught TypeError: setCars[0] is not a function at handleClick1
.
我知道如何在 React 类中执行此操作,但是如何使用 React Hooks 执行此操作?
解决方案
我建议你通过你cars
的地图来渲染它们——这只是简单了一百万倍。从那里您可以将onClick
处理程序应用于每个按钮..
此外,您不应该像现在这样改变状态 - 始终先制作状态副本,更新副本,然后使用更新的副本设置新状态。
编辑:我之前想到的一件事是在对数组执行 pingkey
操作时为每个项目map
这应该是标准做法。
const { useState } = React;
const { render } = ReactDOM;
const Cars = props => {
const [cars, setCars] = useState(["Honda", "Toyota", "Dodge"]);
const updateCars = (value, index) => () => {
let carsCopy = [...cars];
carsCopy[index] = value;
setCars(carsCopy);
};
return (
<div>
{cars && cars.map((c, i) =>
<button key={`${i}_${c}`} onClick={updateCars("Jeep", i)}>{c}</button>
)}
<pre>{cars && JSON.stringify(cars, null, 2)}</pre>
</div>
);
};
render(<Cars />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
推荐阅读
- mysql - 将 Git 标签作为版本存储在数据库中?
- java - 获取动画JAVA后整数的值
- angular - 无法使用角度发送图像文件
- wordpress - WordPress is_search() 函数总是假的
- vb.net - 动态分配 Form 对象
- java - 如何检查矩形和 TextureRegion LibGDX 之间的交集?
- c# - 使用正则表达式删除 \u 字符不起作用
- android - MediaManager.addCompletionHandler 在 Android 上不起作用
- c++ - 如何在 Jasper JPEG2000 中指定小端
- javascript - 更改事件的输入不适用于 Farbtastic 颜色选择器