У меня есть простой список, сделанный в React с функцией создания / удаления / обновления. У меня проблема с обновлением: когда я изменяю ввод, ввод меняет значение, но в console.log я вижу ...

0
AlyaKra 5 Апр 2021 в 23:51

2 ответа

Лучший ответ

Вы никогда не обновляете имя элемента, просто скопируйте существующий элемент, вернув

    const updatedItem = {
        ...item,
      };

    return updatedItem;

Если вы 1) передадите обновленное значение в handleChangeUpdate и 2) используете это значение для изменения имени соответствующего элемента, это сработает:

const F = () => {

  const initialList = [
    {
      id: "a",
      name: "John",
    },
    {
      id: "b",
      name: "Eric"
    },
    {
      id: "c",
      name: "Jonathan"
    },
  ];

  const [list, setList] = React.useState(initialList);
  const [name, setName] = React.useState("");

  function handleChangeUpdate(id, value) {
    const newList = list.map((item) => {
      if (item.id === id) {
        const updatedItem = {
            ...item,
            name: value
          };
   
        return updatedItem;
      }
      return item;
    });
 
    setList(newList);
    console.log(newList);
  }
 
  return (
    <div>                
        <ul >             
            <div>
                {list.map((item) => (                                                                    
                    <li key={item.id}>                      
                    <input className="form-control" onChange={(e)=> handleChangeUpdate(item.id, e.target.value)} defaultValue={item.name}></input>
                    </li>
                    ))}                   
            </div>               
        </ul>
    </div>
  );
};

ReactDOM.render(<F />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
1
fjc 5 Апр 2021 в 20:56

Вы ничего не меняете в объекте updatedItem. Вы переносите те же самые поля из item в новый объект без изменения какого-либо ключа. Так что изменений не будет

0
Josh 5 Апр 2021 в 20:55