Javascript 当我尝试向状态数组添加新对象时，它会将所有现有对象更改为新对象

最终，我希望渲染一个对象数组，所以我从初始化状态开始

state={entries:[]}

然后我创建一个方法，该方法接受用户输入的对象，并将其添加到我的对象数组中

onEntrySubmit = entry => {
    console.log(entry);
    console.log(this.state.entries);

    this.setState({ entries: [...this.state.entries, entry] })
    console.log(this.state.entries);
};

传入的对象看起来是正确的，但此代码不是将此对象添加到数组中，而是用新对象替换所有现有对象。为什么会这样

我还尝试过将现有状态传递给变量并使用push方法，但这也不起作用

    let temp = this.state.entries;
    temp.push(entry);
    this.setState({ entries: temp });

这是我制作的沙盒：
使用prevState值：

  onEntrySubmit = entry => {
    this.setState(prevState => {
      return {
        entries: [...prevState.entries, entry]
      };
    });
  };

此外，您还直接在
Input.js
文件中修改状态。如下所示展开
条目
值，这将克隆
条目
值

  onDateChange = event => {
    this.setState({ entry: { ...this.state.entry, date: event.target.value} });
  };

  onWeightChange = event => {
    this.setState({ entry: { ...this.state.entry, weight: event.target.value} });
  };

选中沙盒中的
，将状态数据从输入组件传递到应用程序组件，每次执行此操作时，将状态作为引用传递

您需要像下面这样传递该状态的副本：

 this.props.onSubmit({...this.state.entry});

Input.js（沙盒中的第31行）

而不是
this.props.onSubmit（this.state.entry）

像这样使用
扩展运算符
：

 this.props.onSubmit({...this.state.entry});

检查

问题出在您的
重量
组件上，您的问题中没有包括该组件<代码>临时日期=event.target.value
将该组件中的当前状态进行变异，然后将其传递并在稍后再次进行变异。请参阅，我认为您指的是我的
输入
组件，但感谢您提供的参考。是的，对不起，我快速浏览了沙箱！或者更简洁地说：
this.setState（{entry:{…this.state.entry，date:event.target.value}）