Question

使用以下ES6语法，调用重置时，将状态恢复为默认状态的最佳方法是什么？或者另一个解决方案是无缝重新加载组件（我读过forceUpdate不是一个好的选择）

class XYZ extends React.Component {
  constructor() {
    super(),
    this.state = {
     ...
    }
  }

  reset() {
    //I need to revert to default props here
  }
}

XYZ.propTypes = {
  ...
}

XYZ.defaultProps = {
  ...
}

export default XYZ

技术上我可以实现重置，如：

reset() {
  if (this.mounted) {
    this.setState(()=> {
      const newState = {
        anchorStandards: {writing: [], reading: []},
        gradeLevels: {gradeLevels: []}
      }
      this.props.onFilterChange(newState)
      return newState
    })
  }
}

但我想知道是否有办法调用this.defaultPros

Answer 1

实施getDefaultState(props)功能，然后在constructor(props)和reset()中调用它。

例如：

getDefaultState(props) {
  return { importantState: props.importantState }
}

constructor(props) {
  this.state = this.getDefaultState(props)
}

reset() {
  this.setState(this.getDefaultState(this.props))
}

使用这种方法，父组件不需要知道任何东西，并且确定相关道具和初始状态的代码只写一次。

Answer 2

尝试这种简单的方法。

https://jsfiddle.net/pablodarde/5fhdLcey/

父元素

RawKind

子元素

SyntaxKind.RefKeyword

在ES6中将状态恢复为默认道具

2 个答案: