Javascript 无法更新反应状态

我试图将新对象推入react状态，但数组状态总是返回空

这是我的反应状态：

this.state = {

          formname: '',
          newform : [],
          formField: {},
          formsCollection: []
        };

来自状态的对象结果

formField

：

{0: {…}, 1: {…}, formname: "form 1"}
  0: {type: "text", label: "First Name", title: "", name: "", uniquekey: "", …}
  1: {type: "", label: "Last Name", title: "", name: "", uniquekey: "", …}
  formname: "form 1"
  __proto__: Object
}

onSubmit= (e) => 
    {   
      e.preventDefault();

      const finalData = {formname: this.state.formname, ...this.state.newform};

      let formField = Object.assign(this.state.formField, finalData);

      this.setState({
        formField
      });

      console.log(this.state.formField, 'single form field');

      // const formsCollection = this.state.formsCollection.slice();



      // if(formsCollection.length){
      //   this.setState({ formsCollection: formsCollection });
      // }
      // else{
      //   formsCollection.push(formField);
      //   this.setState({ formsCollection : formsCollection });
      // }


      this.setState((prevState) => ({
        formsCollection: [...prevState.formsCollection, formField]
      }));

      console.log(this.state.formsCollection, 'forms collection are: ')

    };

形成更新状态的onSubmit（）处理程序函数：

{0: {…}, 1: {…}, formname: "form 1"}
  0: {type: "text", label: "First Name", title: "", name: "", uniquekey: "", …}
  1: {type: "", label: "Last Name", title: "", name: "", uniquekey: "", …}
  formname: "form 1"
  __proto__: Object
}

onSubmit= (e) => 
    {   
      e.preventDefault();

      const finalData = {formname: this.state.formname, ...this.state.newform};

      let formField = Object.assign(this.state.formField, finalData);

      this.setState({
        formField
      });

      console.log(this.state.formField, 'single form field');

      // const formsCollection = this.state.formsCollection.slice();



      // if(formsCollection.length){
      //   this.setState({ formsCollection: formsCollection });
      // }
      // else{
      //   formsCollection.push(formField);
      //   this.setState({ formsCollection : formsCollection });
      // }


      this.setState((prevState) => ({
        formsCollection: [...prevState.formsCollection, formField]
      }));

      console.log(this.state.formsCollection, 'forms collection are: ')

    };

每次单击submit（），它都会将单个

formField

对象打印到控制台，但不会将新对象添加到

formscolection

数组中。此外，我使用了prevState和spread运算符方法，但在这两种情况下，

console.log（this.state.formsCollection，'forms collection are:'）

每次都会打印一个空数组

---

请帮助清除此问题。

setState

是异步的，因此您不会立即看到状态值的更改。在更新状态值可用的情况下，可以向其传递回调函数：

this.setState({
  formField
}, () => console.log(this.state.formField, 'single form field')); 

另一个问题是，您正在使用

对象直接修改您的状态。请指定
，改用
设置状态的函数形式：

 this.setState(state => ({
   ...state,
   formField: {
     formname: state.formname,
     ...state.newform
   }
 }));

试试这个

   this.setState(prevState => {
        prevState.formsCollection = [...prevState.formsCollection, formField];
        return prevState;
      });

setState异步工作，这就是为什么您没有看到更新的状态，您可以使用回调作为

this.setState((prevState) => ({
    formsCollection: [...prevState.formsCollection, formField]
  }), () => {
     console.log(this.state.formsCollection, 'forms collection are: ')
});

希望有帮助
我在setState（）中使用了回调，但它仍然打印空数组[]它甚至没有打印控制台语句您是否正确地关闭了setState括号？您是否在浏览器控制台中看到任何错误，这似乎对我有效，如果可能的话，为你的代码片段创建一个沙盒。在我的表单中，嵌套的数据处理相当多，所以创建演示是个问题。如果你可以分享你的？有没有办法将代码格式更改为使用条件。比如，如果state[]为空，则推送新对象，否则返回旧状态？