javascript - this.state 不会按预期更新

Question

我正在尝试更新组件的状态。它按预期使用 componentDidMount() 在初始安装时获取一些数据。我有一个 componentDidUpdate() 比较 prevProps 和 this.state 并将按预期“重新获取”。然而，在那些时刻之间，我不知道什么时候重新获取，因为 prevProps 和 this.state 变得相等，因为 this.state 不更新(同样，因为 idk 在哪里放置新数据的获取)。

这是在 reactjs 应用程序的客户端。

constructor(props){
  super(props);
  this.state = ({ x:0 })
}

componentDidMount(){
  fetchingdata()
  this.setState({x:data[x]})
}

componentDidUpdate(prevState, prevProps, snapshot){
  if(prevProps.x !== this.state.x){
    return fetchingdata()
  }
}

render(){
  return(
    <div> this.state.x </div>
  )
}

如果您要在 componentDidUpdate() 中使用 console.log(this.state.x)，即使服务器端已完全更新，它也会是当前值更新。基本上 prevProps 更新，this.state 仅在加载时更新，因为 componentDidMount() 然后服务器更新并且不知道在哪里发送数据。

Answer 1

您似乎希望从远程服务器对组件中的某些数据进行最新更新。如果这是您想要实现的目标，您可以使用 setInterval() 每隔 x 秒简单地轮询一次服务器。在您的 componentDidMount()

中执行此操作

componentDidMount() {

    this.interval = setInterval(() => {
        const data = this.fetchData() // Return result of an ajax call
        this.setState({myData: data})
    }, 1000) // Replace x with what suits you

}

还记得在 componentWillUnmount()

中清除间隔

componentWillUnmount() {
   clearInterval(this.interval);
 }