Saya memiliki daftar sederhana yang dibuat bereaksi dengan fungsi pembuatan / delete / pembaruan. Saya memiliki masalah dalam pembaruan, di mana ketika saya memodifikasi input, input mengubah nilai, tetapi di konsol. Log saya melihat ...

0
AlyaKra 5 April 2021, 23:51

2 jawaban

Jawaban Terbaik

Anda tidak pernah memperbarui nama item, cukup salin item yang ada dengan mengembalikan

    const updatedItem = {
        ...item,
      };

    return updatedItem;

Jika Anda 1) lulus nilai yang diperbarui ke handleChangeUpdate dan 2) Gunakan nilai itu untuk mengubah nama item yang cocok, itu berfungsi:

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 April 2021, 20:56

Anda tidak mengubah apa pun di objek updatedItem. Anda menyebarkan bidang yang sama persis dari item ke objek baru, tanpa memodifikasi kunci apa pun. Jadi tidak akan ada perubahan

0
Josh 5 April 2021, 20:55