如何在挂载后重新渲染React组件而不在componentDidMount中调用setState

Question

我有一个包装在HOC中的react组件，可将道具传递给包裹的孩子。 调用子级的构造函数时，它将执行一些工作，然后执行从HOC传递到props中的回调。 此回调更新HOC构造函数（定义）中的属性（我认为这是正确的语言）。 然后，HOC使用更新的定义为HOC及其包装的子项设置订阅。

我这样做的原因是，子级从其父级接收道具，该父级包含一个动态对象数组，在安装组件时需要订阅，并且在实例化HOC时无法知道这些订阅是什么。

HOC正在调用setState，该方法将释放孩子，但是，我知道这是一种反模式。 我该如何解决？

HOC

const HOCComponent= function HOCComponent(config) {
  return function returnWrapped(Wrapped) {
    return class Wrapper extends Component {
      constructor(props) {
        this.handleData = this.handleData.bind(this)
        this.data = {}
      }

      comonentDidMount() {
        setSubscription(this.data, () => {
          this.setState({
            key: getData(),
          })
        })
      }

      handleData(data) {
        this.data = data
      }
      render () {
        <Wrapped handleData={this.handleData} /> 
      }
    }
  }
}

儿童

const Component class Wrapper extends Component {
  constructor(props) {
    // Stuff with props received from it's parent (not HOC)       
    props.handleData(props.data)
  }
  render() {
    <div>Hello!</div>
  }
}

Answer 1

您可以使用forceUpdate方法。

如果您在组件内调用this.forceUpdate() ，则将重新呈现该组件。