Блог

Главная - Вопросы по программированию - react onchange отправляет значения в объекты

react onchange отправляет значения в объекты

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть динамические созданные поля (входной тег)

 const [data, setData] = useState({ native: [{}], rolls: [{}] }) // initial data

{navtive?.map((item, index) => {
    return (
        <input
        type="text"
        name={item.id}
        onChange={(e) =>
            handleChange("fee", e.target.value, index, item.id)
        }
        />
...
{rolls?.map((item, index) => {
    return (
        <input
        type="text"
        name={item.id}
        onChange={(e) =>
            handleChange("fee", e.target.value, index, item.id)
        }
        />

Ожидаемый результат:

 const output = {
    native: [{id: 1, fee: "12"}, {id: 5, fee: "2"}],
    rolls: [{id: 4, fee: "1332"}],
};

Функция onChange :

 const handleChange = (field, value, index) => {
    setData((prevState) => {
        const nextState = [...prevState];
        nextState[index][field] = value;
        return nextState;
    });
};

Как получить ожидаемый результат? Что я делаю неправильно в функции onChange.

Спасибо

Комментарии:

1. Ожидаемый результат не имеет смысла, поскольку карты возвращают компоненты react, а не простые объекты.

2. это ожидаемый результат от onChange — [{id: 1, fee: "12"}, {id: 5, fee: "2"}]

3. Ах, я понимаю. Можете ли вы также поделиться текущим выводом?

4. prevState не является итеративным

5. @evolutionxbox Проблема не в этом. Проблема в том, что OP хочет распространить его в массив, и это вызовет ошибку TypeError.

Ответ №1:

Вы должны добавить дополнительные аргументы handleChange для этого вывода. type — чтобы понять , что такое свойство native или rolls . id — идентификатор из текущего элемента данных. Пример — песочница

 const handleChange = (type, field, value, index, id) => {
    setData((prevState) => {
      const nextState = [...prevState[type]];
      nextState[index] = {
        ...prevState[type][index],
        id,
        [field]: value
      };
      return {
        ...prevState,
        [type]: nextState
      };
    });
  };

JSX

 handleChange("native", "free", e.target.value, index, item.id)

Комментарии:

1. Ошибка типа: prevState[тип] не является итеративным ` const [data, setData] = useState([ { native: [{}], откаты: [{}] }, ]);`

2. У вас ошибка, исправьте useState({ native: [{}], rolls: [{}] }) вместо const [data, setData] = useState([ { native: [{}], rolls: [{}] }, ]);

3. data является ли объект не массивом, см. Выше ваш вопрос

Метки: