首页 > 解决方案 > 状态没有通过 this.setstate 以 React 形式设置

问题描述

我正在 React 中构建一个表单。单击取消应用程序组件中的表单需要重置我从另一个组件数据获取的状态

class App extends React.Component {

constructor(props){
  super(props);
  this.Data = React.createRef();
  this.state = {
    fruits:["Mango","Apple","Banana"],
  };
}

//reset method in App called on clicking cancel in form
resetForm(e){
  e.preventDefault();
  const resetState = this.Data.current.getFruit();
  console.log(resetState);
  this.setState({
    state: resetState
  });
}

//class in different file
export class Data extends React.Component {
  getFruit() {
    return {    
      fruits: [
        "Mango",
        "Apple",
        "Bananna"
      ]
    }
    //more code below
}

当我在 resetForm 方法中控制台 resetState 时,我可以从 Data 组件中获取初始状态,但它不会将其设置为 App 中的状态。我究竟做错了什么?我是 React 新手

标签: javascriptreactjs

解决方案


当您使用该setState方法时,React 已经知道它应该应用于 state 属性,因此您应该使用以下方式调用该方法:

this.setState(resetState);

推荐阅读