Как обновить текстовое поле со значением переменной массива объектов в React?

Question

В ответ я пытаюсь обновить отображенный сопоставленный массив объектов в Textfields со значением, установленным на значение объектов, а затем также иметь возможность обновлять / изменять значение в текстовом поле и соответствующее значение состояния. В настоящее время массив объектов корректно отображается и отображается со значением объектов, однако при попытке изменить значение в TextField ничего не меняется на дисплее, и журналы консоли приводят только к изменению последней буквы значения. Кажется, что, поскольку мне нужно, чтобы текстовое поле начиналось со значения, это значение сохраняет старое значение из-за данных, отображаемых с картой, или из-за неправильного обновления массива объектов? Хотя в этом примере массив объектов не нужен, он применяется к моему компоненту, который в нем нуждается.

Ниже приведен пример кода для демонстрации:

import React, { useState} from 'react';

const Test = () => {
  const [data, setData] = useState([
    {
      num: 1,
      name: 'hello'
    },
    {
      num: 2, 
      name: 'world'
    },
    {
      num: 3,
      name: 'test'
    },
  ]);

const handleChange = e => {
    const { name, value, id } = e.target;
    setData(data[id].name = value)
    console.log(value)
}

return (
    <div>
        {
          data.map((_itm, index) => (
            <TextField key={index} value={_itm.name} onChange={handleChange} name='name' id={index.toString()}/>
          ))
        }
      </div>
)
}

Таким образом, 3 текстовых поля отображаться со значениями, привет, мир и тест. При попытке редактировать текстовые поля значения не меняются. Любая помощь приветствуется, спасибо.

Answer 1

В хуке состояния, data устанавливается как массив. Поэтому вы всегда должны передавать обновленную копию этого массива при каждом вызове setData.

const handleChange = e => {
    const { value, id } = e.target;

    // Make a shallow copy of the current `data`.
    const newArray = [...data];

    // Update the changed item.
    newArray[id] = {
        ...newArray[id],
        name: value
    }

    // Call setData to update.
    setData(newArray);
    console.log(value);
}