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;

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

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

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

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

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

标签： arraysreactjsobjectuse-state

你正在改变对象

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

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

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

问题描述

解决方案

推荐阅读