setValue дублирует значение на всех входах вместо ввода в фокусе

Question

Я экспериментирую с моими входами, я получаю объекты со значениями входных данных в Array из fetch в другом компоненте с именем customFieldsUpdate, я хочу обновить значение объектов в случае, если нет или если это хотят быть изменены.

Проблема в том, что я получаю все на месте, но когда я набираю одно <input/>, все входные значения заменяются, а не только те, которые я пытаюсь редактировать. чтобы быть более точным c, сейчас у меня есть 5 входов, если я наберу один из них, все они изменятся. Я пытаюсь реализовать что-то вроде this, чтобы сохранить изменение только на входе в фокусе, но я не получаю его ... Вот мой код:

import React, {useState} from 'react';
import {CustomFieldsUpdate} from './customFieldsUpdate';

import {Col} from 'reactstrap';

export function CustomFieldsList({list}) {
  const [value, setValue] = useState(false);

  function handleChange(e){
    setValue(e.target.value) // <----- Here Im trying to do something like this.setValue(e.target.value) 
                             // or setValue(e.target.this.value)?
  }
  console.log(list);

  return (
    <>
      <form>
        <ul className={'list-group border-0'}>

          {list.map(item => (  // <--- Here I generate the inputs that comes from the fetch

            <li className={'list-group-item d-flex border-0'} key={item.id}>
               <Col md={2}>
                <label>{item.id}</label>
               </Col>
               <Col md={10}>

                <input
                  className="form-control"
                  type="text"
                  value={value || item.value} //<---- and here show value if there is one or set the newone
                  onChange={handleChange} /> // <--- Im trying to handle change here 

               </Col>
            </li>
          ))}

        </ul>
        <CustomFieldsUpdate />
      </form>
    </>
  );
}

Входные данные генерируются в зависимости от количества объекты, которые я получаю из JSON, вот почему я их отображаю ... может, это не так? Заранее благодарю за любую помощь!

Answer 1

Да, у вас есть список входов со свойством one value и setValue для списка всех входов. Вам нужно создать один компонент с одним входом и одним значением и setValue. И в отображении контейнера такие компоненты, как:

CustomItem.js

export function CustomItem({item}) {
  const [value, setValue] = useState(false);

  function handleChange(e){
    setValue(e.target.value);                           
  }

  return (
    <>
            <li className={'list-group-item d-flex border-0'} key={item.id}>
               <Col md={2}>
                <label>{item.id}</label>
               </Col>
               <Col md={10}>

                <input
                  className="form-control"
                  type="text"
                  value={value || item.value} 
                  onChange={handleChange} /> 
               </Col>
    </>
  );
}

CustomList

import CustomItem from './CustomItem';

export function CustomFieldsList({list}) {

  return (
    <>
      <form>
        <ul className={'list-group border-0'}>

          {list.map(item => (  
             <CustomItem item={item}/>
            ))}

        </ul>
        <CustomFieldsUpdate />
      </form>
    </>
  );
}