Question

我想通过ComponentWillMount更新状态像：

this.state = {
  Canonical:''
}
componentWillMount(){
  this.setState({Canonical: window.location.href})
}

有人知道该怎么做吗？

谢谢。

Answer 1

您应该使用 componentDidMount 方法。该生命周期方法是在安装组件后调用的，同时调用 componentWillMount 。

设置状态会重新渲染该组件。

另一个选择是您在构造函数中初始化状态值。

 constructor(){
      super();
      this.state = {
        Canonical: window.location.href
      }
    }

或

componentDidMount(){
  this.setState({Canonical: window.location.href})
}

Answer 2

您应避免在componentWillMount()

中进行异步初始化

componentWillMount()在安装之前立即被调用。在render()之前调用它，因此在此方法中设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。

在componentDidMount而非componentWillMount中使组件初始化异步调用

function componentDidMount() {
  axios.get(`api/messages`)
    .then((result) => {
      const messages = result.data
      console.log("COMPONENT WILL Mount messages : ", messages);
      this.setState({
        messages: [...messages.content]
      })
    })
}

请注意，componentWillMount已贬值，因为它对于异步渲染并不安全

反应：https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

好读：https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b

Answer 3

如果要在初始化时设置setState，则

constructor(props){
  super(props);
  this.state = {
    Canonical : window.location.href
  };
}

或者如果您想更新componentWillMount上的状态，则

constructor(props){
   super(props);
   this.state = {
     Canonical : ''
   };
}

componentWillMount(){
  this.setState({ Canonical : window.location.href });
}

componentWillMount函数将在render函数之前调用。如果componentWillMount中出现问题，则不会渲染该组件。它可以更好地阻止，您可以尝试使用componentDidMount（）;函数该函数将在组件中的render函数之后调用

Class Component{
  //sample structure of component and the flow
  componentWillMount(){}
  render(){}
  componentDidMount(){}
}

如果您使用的是React Router，则可以这样称呼它：this.props.location是该软件包中的一项功能了解更多：https://reacttraining.com/react-router/web/api/location

如何在ComponentWillMount中使用window.location.href？

3 个答案: