使用 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。 資源