页面刷新时运行函数的最佳方式

Posted 2021-04-11

我正在尝试刷新页面时调用一个函数。如果页面是用我从后端获得的数据渲染的，我添加了一个状态，但是我收到一条警告消息“警告：在现有状态转换期间（例如在render中，无法更新。）渲染方法应该是纯函数道具和状态。”即使它工作正常（警告消息除外），我也不认为这是最好，最有效的方法？

如果这是最好，最有效的方法，我该如何解决警告消息？

function Demo() {
  constructor(){
    this.state = {
      username: "unknown",
      rendered: false,
    }
    this.renderUserProfile = this.renderUserProfile.bind(this);
  }

  update(){
    //code to retrieve data from backend node.js *
    this.setState({ username: data });
    this.setState({ rendered: true });
  }

  render(){
    if (!this.state.rendered) {
      this.update();
    }
    return (<p>demo</p>)
  }
}

谢谢您的帮助！

答案

请勿更改render内部的状态，因为每个状态（或道具）的更改都会再次调用render。这就是警告告诉您的内容：您可能会陷入无限循环。

不需要“渲染”的状态参数，因为只要执行render，您的组件就会立即调用this.setState({username: data});。如果您希望发生某些事情，请将其添加到setState行之后的update中。

现在，让我们想象您仍然真正想要它。如果您不希望在rendered状态更改时呈现组件，则不要使用React Component状态，而应使用任何标准类属性：

class MyComponent extends React.Component {
    rendered = false
    ...
    render() {
        this.rendered = true
        ....
    }
}

[请注意，这看起来超级错误（而且没用），因为它试图绕过React框架擅长的事情。

最后，从此代码中无法得知您打算如何传入新数据。如果是Ajax调用，那么您将在Ajax调用的回调中使用该数据调用this.update-当然不是在render中。