反应数组中元素的Hooks setState

2024-05-04 • 问答

如何更新状态数组中的单个元素？下面是我的问题的一个示例：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

点击渲染按钮后，我收到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> ) };。我知道如何在React类中执行此操作，但是如何在React Hook中执行此操作？

我建议您通过cars进行映射以进行渲染-总体而言，这要容易上百万倍。从那里，您可以将onClick处理程序应用于每个按钮。

此外，您不应该像以前那样改变状态-始终先制作状态副本，更新副本，然后使用更新后的副本设置新状态。

编辑： ：key遍历数组时，我想过的一件事是向每一项添加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>

我认为您应该更正这些行以发现错误源

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

进入

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

反应数组中元素的Hooks setState

wangchao123com123 回答：反应数组中元素的Hooks setState

大家都在问