Arrays 在React中使用useState更改对象数组中的单个值

我正在学习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;

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

map

无法运行

---

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

您正在更改该对象

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

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

您需要将阵列复制到较新的版本中

使用index属性从数组中提取对象

更新字段

函数应用程序（）{
const[data，setData]=React.useState([
{name:“你好”，id:1}，
{姓名：“世界”，id:2}
]);
函数更改名称（idx）{
const newData=[…data]；
newData[idx].name=“StackOverFlow”；
setData（newData）；
}
返回(
{data.map（（d，idx）=>{
返回(
{d.name}

{
更改名称（idx）；
}}
/>
);
})}
);
}

---

注:-

---

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

setPeople（[{…people[0]，name:“Frank”}，…people.slice（1）]

回答得好，我认为

data[idx].name=“StackOverFlow”

应该是

newData[idx].name=“StackOverFlow”宾果！更正。
clickHandler = () => {
   const newPeople = people.map((person, index) => {
       if (index === 0) {
            return {
                ...person,
                name: 'Frank'
            }
        }

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

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>
  );
}