使用 React.js 中的钩子从输入值编辑 object 数据

Question

我创建了一组具有名称和出生日期属性的对象。 然后我创建一个 Person 组件，并使用道具 map 从数组中取出。 我想让名称可编辑，所以我将道具放入输入值。 我正在尝试使用钩子来更新该对象名称，但是，我目前只返回一个空值，然后编辑表中的所有值。 有什么方法可以指定仅编辑该特定对象名称并更新数组？

新表.js

import React, { useState } from 'react';
import './list.css';
import TableHeader from './TableHeader';
import PersonItem from './PersonItem';
import { people } from './people.js';


function NewTable() {

  const [itemDetails, editItemDetails] = useState(people.name)

  function newPeople(people) {
    return (
      <PersonItem
        name={itemDetails}
        date={people.birth_date}
        edit={e => editItemDetails(e.target.value)}
      />
    );
  }

  return(
    <div id="task-group">
      <table className="task-list">
        <TableHeader />
        <tbody>
          {people.map(newPeople)}
        </tbody>
      </table>
    </div>
  )
}

export default NewTable;

PersonItem.js

import React from 'react';
import './list.css';

function PersonItem(props) {

  return(
      <tr>
        <td><input type="text" value={props.name} onChange={props.edit}/></td>
        <td><input type="text" value={props.date}/></td>
      </tr>
  )
}

export default PersonItem;

人.js

const people = [
  {
    name: "John Smith",
    birth_date: '01/01/1991',
  },
  {
    name: "Dwayne Johnson",
    birth_date: '03/05/1992',
  },

]

export { people };

Answer 1

这是一种可能的解决方案：

每个人都有一个唯一的 id：

const myPeople = [
  {

    id: "1",
    name: "John Smith",
    birth_date: '01/01/1991',
  },
  {
    id: "2",
    name: "Dwayne Johnson",
    birth_date: '03/05/1992',
  },
]

然后将此 function 传递给 PersonItem 组件，以便他们可以调用并更改 state：

const [people, setPeople] = useState(myPeople)

// Pass this function as a prop to PersonItem
function changeNameOfPerson(id, newName) {
  const peopleCopy = [...people];
  for (let person in peopleCopy) {
    if (person.id === id) {
      person.name = newName;
    }
  }
  setPeople(peopleCopy);
}

Answer 2

使用钩子时的一个好的做法是命名 function，它会使用前缀“set”更改 state。 示例： [nameOfYourVar, setNameOfYourVar]这提高了可读性。

正如 Mellet 所说，在每个 object 上使用唯一标识符非常重要。 您可以使用此 ID 更改阵列中的特定 object。 资源