如何在掛載后重新渲染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() ，則將重新呈現該組件。