Question

componentDidMount() {
    const user = auth.getCurrentUser();
    this.setState({ user });
  }

我有这段代码，我想this.setState({ user });会花一点时间，如果我想像这样进行一些检查

<Route
              path="/foo"
              render={props =>
                this.state.user ? (
                  <Bar {...props} />
                ) : (
                  <Redirect to="/login" />
                )
              }
            />

刷新页面时，开始时用户始终为null。什么是正确的解决方案？我需要在constructor设置状态吗？还是我做错了什么？

我的帐户受到一些否决问题的阻止，有趣的是，即使我已经接受了答案，我也必须重新编辑它们。我不明白这样做的意义。这个stackoverflow系统。

现在，除了继续编辑我的问题外，我基本上无能为力，并且所有问题都已得到解答。这太荒谬了！！！

Answer 1

是的，您应该在构造函数中初始化状态。

请参见React docs example：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Answer 2

您的代码中的问题在于，componentDidMount在渲染之后被调用，并且在您的用户详细信息被获取并存储到状态中时，由于用户希望将组件重定向到/login可用。要解决此问题，您需要在初始渲染之前获取user的详细信息，因此constructor是执行此操作的理想位置

constructor(props) {
   super(props);
   this.state = {
       user: auth.getCurrentUser()
   }
}

Answer 3

状态进入构造函数内部，但仅在您需要构造函数时（例如：初始化标志）。如果不需要构造函数，则可以在外部初始化状态：

class MyComponent extends Component {
    state = { myState = [] }

    render() {
        const { myState } = this.state
        return (...)
    }
}

Answer 4

刷新页面时，开头的用户始终为空

@Shubham Khatri确实很好地解释了它，简而言之，仅仅是因为render()函数在componentDidMount()之前被调用，因此user始终为空。

看看这个：React lifecycle methods diagram

如您所见，setState的正确位置应该是contructor()，因为它在render()之前被调用。

但是，对于api调用，为什么componentDidMount是更好的地方？为什么我们不完成constructor中的所有设置吗？

我知道您在谈论这个：https://reactjs.org/docs/faq-ajax.html。该文档确实指出：您应该在生命周期方法componentDidMount中使用AJAX调用填充数据。这样一来，您就可以在检索到数据时使用setState来更新组件。

然而，in another place他们说：

您可以立即在setState()中致电componentDidMount()。它会触发额外的渲染，但这将在浏览器之前发生更新屏幕。这样可以保证即使render() 在这种情况下被两次调用，用户将看不到中间州。请谨慎使用此模式，因为它经常会导致性能问题。 在大多数情况下，您应该可以分配而不是constructor()中的初始状态。 但是它可以是 对于需要测量的模态和工具提示之类的情况是必需的 一个DOM节点，然后渲染取决于其大小或的内容 位置。

...以及需要进行身份验证的情况，因为此过程取决于user的值（作为设计）。

Answer 5

您应该使用构造函数（）初始化状态，使用componentDidMount（）调用函数，使用componentWillReceiveProps（）设置setState。

  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: ""
    };
  }

  componentDidMount() {
    this.props.userProfile();
  }

  componentWillReceiveProps(nextProps, prevProps) {
    this.setState({
      firstName: nextProps.user.firstName,
      lastName: nextProps.user.lastName
    });
  }

React js状态和生命周期

5 个答案: