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

问题描述 投票:0回答:1

我正在尝试刷新页面时调用一个函数。如果页面是用我从后端获得的数据渲染的,我添加了一个状态,但是我收到一条警告消息“警告:在现有状态转换期间(例如在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>)
  }
}

谢谢您的帮助!

javascript reactjs
1个回答
1
投票

请勿更改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中。

热门问题
推荐问题
最新问题