React 中具有专用状态的映射组件在更新时会丢失状态答案

【问题标题】：Mapped component with dedicated state in React loses state on updateReact 中具有专用状态的映射组件在更新时会丢失状态
【发布时间】：2021-07-12 07:35:30
【问题描述】：

我遇到了这个问题，我有一个数组和一个像这样的组件：

const Animal = ({ data }) => {
  const [state, setState] = useState(data);
  const updateName = (event) =>
    setState((old) => ({ name: event.target.value, ...old }));
  console.log({ state }, state.name);
  return (
    <div>
      <h3>{state.animal}</h3>
      <h3>{state.name}</h3>
      <input onChange={updateName} />
      <hr />
    </div>
  );
}

const App = () => {
  const data = [
    { animal: "cat", name: "muji", date: new Date(2021, 0, 1), status: 0 },
    { animal: "cat", name: "mine", date: new Date(2021, 0, 1), status: 1 },
    { animal: "dog", name: "fido", date: new Date(2021, 0, 1), status: 1 },
    { animal: "dog", name: "fido2", date: new Date(2020, 0, 1), status: 1 },
    { animal: "dog", name: "fido3", date: new Date(2021, 0, 1), status: 0 },
    { animal: "hamster", name: "gerry", date: new Date(2019, 0, 1), status: 0 },
    { animal: "t-rex", name: "dino", date: new Date(2020, 0, 1), status: 0 },
    { animal: "sheep", name: "s", date: new Date(2019, 0, 1), status: 0 }
  ];
  return (
    <div>
      {data.map((item, idx) => {
        return <Animal data={item} key={idx} />;
      })}
    </div>
  )
}

在更新动物名称后，状态突然失去所有属性，只留下名称。

这是codesandbox demo

谢谢！

编辑：

我也尝试将数据设置为这样的状态，但没有任何改变：

useState([...])

【问题讨论】：

如何更新状态？用户界面没有任何变化。
你沙箱里的代码和你问题里的代码不一样...
我知道这就是我遇到的问题。如果您没有注意到，在 Animal 组件中有一个名为 updateName 的函数。这就是我试图更新它的地方。谢谢！
@TJ 我已经更新了。我正在尝试尝试看看我能做什么

标签： javascript reactjs

【解决方案1】：

name 属性被旧值覆盖，因为setState 中的属性顺序不正确。

代替

setState((old) => ({  name: event.target.value,...old,  }))

应该是

setState((old) => ({  ...old, name: event.target.value, }))

而您的输入元素缺少value 属性

const Animal = ({ data }) => {

  const [state, setState] = useState({...data});

   const updateName = (event) =>{
    setState((old) => ({  ...old, name: event.target.value, }))
  };

  return (
    <div>
      <h3>{state.animal}</h3>
      <h3>{state.name}</h3>
      <input value={state.name} onChange={updateName} />
      <hr />
    </div>
  );
}

【讨论】：

我必须等 5 分钟才能让我 :)