Question

我正在尝试写一个HOC in react来保护路径，除了构造函数之外，没有调用类中的函数。这就是我对代码所拥有的内容（this.props.userProfile是另一个可以返回用户信息的函数。该函数与其他组件完美配合，所以我不认为它会导致问题）

import React from 'react';
class AuthorizedHOC extends React.Component {
  constructor(props, allowedRoles) {
    super(props);
    console.log('in authorizedHOC');
    this.state = {'role':false};
    this.checkAuthorization = this.checkAuthorization.bind(this);
  }

  componentWillMount(){
    this.checkAuthorization();
    console.log('in component will mount');
  }

  componentWillReceiveProps(nextProps){
    this.checkAuthorization();
    console.log('in next props will mount');
  }

  checkAuthorization(){
    console.log('checkAuthorization');
    let userProfile = this.props.userProfile;
    for (let role in allowedRoles){
        if (userProfile.roles.includes(role)){
            console.log("have access");
            this.state.role = true;
        }
    }
    console.log('in side checkAuthorization');
  }

  render() {
    console.log('in render');
    return (<div>
    {this.state.role ? <WrappedComponent {...this.props}/> : <p>not 
    allowed</p>}
    </div>);
  }
}
export default AuthorizedHOC;

Answer 1

componentWillMount()已弃用且已被删除，您应该使用UNSAFE_componentWillMount()。

但我建议您不要使用此生命周期方法，因为如果您在此方法中执行API异步调用，则组件将在调用完成之前呈现

Answer 2

您现在的语法看起来并不正确。 HOC应该被编写为接受其他组件的函数，组成它们，然后返回一个新组件as described in the guide here。还有一些其他问题。

关于this.state.role = true;行，状态并不意味着直接变异，只是通过this.setState({ ... })进行更新，以便正确地告知对执行新渲染的反应与新的州。
{@ 1}}函数已被弃用，使用它们对异步渲染不安全。 See this blog post for details.此处，您应该使用componentWill*而不是componentWillMount。
您可以直接在渲染中执行计算，而不是使用componentDidMount。它被认为是反模式手动将状态同步到这样的道具。

由于您可以直接根据道具进行计算，因此实际上不需要状态。

componentWillReceiveProps

你可能会将import React from "react" function withAuthorization(allowedRoles, WrappedComponent) { return class AuthorizedHOC extends React.Component { render() { const { userProfile } = this.props let authorized for (let role in allowedRoles) { if (userProfile.roles.includes(role)) { authorized = true } } return <div>{authorized ? <WrappedComponent {...this.props} /> : <p>not allowed</p>}</div> } } } export default withAuthorization // usage function SecretPage() { return <div>only shows when authorized</div> } const SecretPageWithAuth = withAuthorization(["allowed", "roles", "here"], SecretPage) // example usage w/ react router <Route path='/test' component={SecretPageWithAuth} />组件变成无状态组件，渲染函数也可能变得更干净。我想以更接近原始代码的方式编写它。

React componentWillMount（）和render（）永远不会被调用

2 个答案: