Question

我试图将新对象推入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（）处理函数：

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（）时，它都会将单个formField对象打印到控制台，但不会将其添加到formsCollection数组中。另外，我同时使用了prevState和散布运算符方法，但是在两种情况下，console.log(this.state.formsCollection, 'forms collection are: ')每次都向我输出一个空数组。

请帮助解决此问题。

Answer 1

setState是异步的，因此您不会立即看到状态值的更改。您可以向其传递一个回调函数，其中提供了更新的状态值：

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

另一个问题是您要直接使用Object.assign修改状态，而应使用setState的功能形式：

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

Answer 2

尝试

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

Answer 3

setState异步工作，这就是为什么看不到更新状态的原因，可以将回调用作

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

希望有帮助

无法更新反应状态

3 个答案: