反应：输入不反映变化

Question

我有一个在 React 中创建/删除/更新功能的简单列表。我在更新时遇到问题，当我修改输入时，输入会更改值，但在 console.log 中我看到相同的数组更新而没有进行任何更改。

通常在更新后，新列表应该使用新的更改进行更新，但事实并非如此。相反，在新数组中，我有 name: undefined 我错过了什么吗？

import React, { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";

export default () => {

  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) {
    const newList = list.map((item) => {
      if (item.id === id) {
        const updatedItem = {
            ...item,
          };
   
        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={()=> handleChangeUpdate(item.id)} defaultValue={item.name}></input>
                    </li>
                    ))}                   
            </div>               
        </ul>
    </div>
  );
};

Answer 1

您永远不会更新项目的名称，只需通过返回复制现有项目

    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>

Answer 2

您没有更改 updatedItem 对象中的任何内容。您正在将完全相同的字段从 item 传播到新对象中，而无需修改任何键。所以不会有任何变化