React Hooks setState 数组中的元素

Posted 2023-02-22

【中文标题】React Hooks setState 数组中的元素

【英文标题】：React Hooks setState of an element in an array

【发布时间】：2020-04-07 20:53:08

【问题描述】：

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

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

【参考方案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>

【参考方案2】：

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

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

进入

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

【讨论】：

你正在改变状态变量。在 React 世界中这是“不可以”。重新渲染可能无论如何都会运行（至少对于基于类的组件setState 重新渲染，即使没有更改），但是一旦您将此状态作为道具传递给某个孩子，您就会遇到麻烦。

是的，我明白你的意思，但考虑到这不是有问题的 numero uno 问题，最好保持简单：Uncaught TypeError