Question

我正在学习React课程，并且正在尝试围绕代码做一些实验，以更好地理解概念。

我有一些虚拟数据：

export const data = [
  { id: 1, name: 'john' },
  { id: 2, name: 'peter' },
  { id: 3, name: 'susan' },
  { id: 4, name: 'anna' },
];

这是我的组件：

import React from "react";
import { data } from "../../../data";

const UseStateArray = () => {
  const [people, setPeople] = React.useState(data);

  return (
    <>
      {people.map((person) => {
        const { id, name } = person;
        return (
          <div key={id} className="item">
            <h4>{name}</h4>
          </div>
        );
      })}
      <button
        type="button"
        className="btn"
        onClick={() => setPeople([])}
      >
        Clear Items
      </button>
    </>
  );
};

export default UseStateArray;

该按钮在单击时具有事件处理程序，该事件处理程序使用空数组调用setPeople（以便删除所有元素）。

我试图更改此类按钮的功能，并尝试通过以下方式更改对象数组（数据）的第一个元素的名称：

onClick={() => setPeople(people[0].name = 'Frank')}

这样做，得到一个错误，即：“ TypeError：people.map不是函数”。我认为原因是因为我不再返回数组，因此map无法运行。

如何简单地更改数组中存在的对象的名称（或任何值）？

Answer 1

您正在变异对象

clickHandler = () => {
   const newPeople = people.map((person, index) => {
       if (index === 0) {
            return {
                ...person,
                name: 'Frank'
            }
        }

        return person;
   });
  
   setPeople(newPeople);
}
....
....
onClick={clickHandler}

Answer 2

您需要将阵列复制到新版本中。
使用index属性从数组中提取对象。
更新字段。

function App() {
  const [data, setData] = React.useState([
    { name: "Hello", id: 1 },
    { name: "World", id: 2 }
  ]);

  function changeName(idx) {
    const newData = [...data];
    newData[idx].name = "StackOverFlow";
    setData(newData);
  }

  return (
    <div>
      {data.map((d, idx) => {
        return (
          <div>
            <p>{d.name}</p>
            <button
              onClick={() => {
                changeName(idx);
              }}
            />
          </div>
        );
      })}
    </div>
  );
}

注意：-

不允许在状态上进行更改，这基本上意味着您不能直接更改状态。复制对象或数组并进行更新。

在React中使用useState更改对象数组中的sigle值

2 个答案: