Question

我正在React中构建一个表单。单击取消后，App组件中的表单需要重置从其他组件Data获取的状态

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的新手

Answer 1

使用setState方法时，React已经知道应将其应用于state属性，因此应使用以下方法调用该方法：

this.setState(resetState);

状态未在React形式中使用this.setstate设置

1 个答案: