Изменение объекта в react

Question

Друзья, добрый день. Учу реакт и пытаюсь его понять, но имею сложности в работе с объектами массивов и их изменением в стейте.

Сам код максимально упростил: https://pastebin.com/8EQxwhfb

Кратко: Дан массив объектов: humans, который я разворачиваю через .map() + прикрепленная к инпуту функция OnChange, которая принимает id объекта, находит его через if и должна изменять.

Задача: Изменять в реальном времени любой из инпутов через onChange

Проблема: Не могу через Onchange передать и значение event.target.value, и id развернутого объекта, чтобы изменить его через функцию.

Функция:

function OnChange(id){

    setHumans(
        humans.map(elem=>{
            if(elem.id === id){
                elem.name = 555;
            }
            return elem
        })
    )
}

На текущий момент меняет найденный инпут на 555 в рамках теста, который должен быть на самом деле event.target.value из инпута,чтобы число изменялось и перезаписывалось, что я сделать не могу одновременно с передачей id объекта.

Сам инпут: <input onChange={()=>OnChange(elem.id)} value={elem.name}/>

передает в коллбек функции Onchange айди текущего элемента (elem.id), но сюда-же мне нужно передать и сам event.target.value, чего я сделать не могу одновременно с передачей id. Любая передача двух параметров одновременно приводит к ошибке.

Надеюсь мне удалось передать тот абсурдный бред что я пишу, возможно моя конструкция в корне неправильная и наверняка не самая оптимизированная, ведь после каждого изменения поля, перебирается полностью весь массив,но другого метода изменения стейта я пока не знаю. Подтолкните меня на правильный путь пожалуйста.

Answer 1

Нет никаких проблем в том, чтобы передавать в функции несколько параметров, если вы делаете все правильно. Достаточно в самой функции указать этот параметр и передать его.

function OnChange($event, id) { 
  ... 
}

<input onChange={($event)=>OnChange($event, elem.id)} value={elem.name}/>

Полный пример:

export default function App() {
  const [humans,setHumans] = React.useState([
    {id:1,name:"Антон"},
    {id:2,name:"Сергей"},
    {id:3,name:"Виктор"},
    {id:4,name:"Игорь"},
  ])

  function OnChange($event, id){
    setHumans(
      humans.map(elem=>{
        if(elem.id === id){
          elem.name = $event.target.value;
        }
        return elem
      })
    )
  }

  return (
    <div className='App'>
      {humans.map(elem => 
        <div>
          <input onChange={
            ($event)=>OnChange($event, elem.id)} value={elem.name}/>
        </div>
      )}
    </div>
  );
}

БЛОГ НА HUSL

Изменение объекта в react

Ответы (1 шт):