React Hooks setState 数组中的元素

Question

如何更新状态数组中的单个元素？这是我目前使用的代码：

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 执行此操作？

Answer 1

我建议您映射到您的 cars 以渲染它们 - 总体而言，这只是简单一百万倍。从那里您可以将onClick 处理程序应用于每个按钮..

此外，您不应该像现在这样改变状态 - 始终先复制状态，更新副本，然后使用更新的副本设置新状态。

编辑：我之前想到的一件事是在mapping 数组时为每个项目添加key。这应该是标准做法。

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>

Answer 2

我认为您应该更正这些行以找出错误来源

const handleClick1 = () => { setCars[0]("Jeep") }

进入

const handleClick1 = () => { cars[0]="Jeep"; setCars(cars); }