Question

我正在尝试更新组件的状态。它会按照componentDidMount()的预期在初始安装时获取一些数据。我有一个比较componentDidUpdate()和prevProps的{{1}}，并将按预期“重新获取”。但是，在那一刻之间，我不知道何时重新获取，因为this.state不会更新，prevProps和this.state变得相等（再次，因为idk放在哪里获取新数据）。

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

this.state

如果要在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> ) }中访问console.log(this.state.x)，即使服务器端已完全更新，它也将是当前值。基本上componentDidUpdate()更新，prevProps仅由于this.state而在加载时更新，然后服务器更新并且不知道将数据发送到哪里。

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);
 }

Answer 2

您的问题之一似乎在这里：

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

在反应中，要访问状态，必须在渲染区域中使用“ {}”输入javascript。实际上，这实际上是做出反应的重要内容之一。这样，您就可以从状态或“ render（）{”和“ return（）”区域之间的任何javascript中访问变量。

数据不返回的原因之一是未访问javascript环境，因为它将“ this.state.x”呈现为文本而不是状态。

尝试

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

Answer 3

请对API提取使用承诺，请检查componentDidMount

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

componentDidMount(){
  fetchingdata()
   .then((res) => {
      this.setState({x:res[x]}) 
   })
}

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

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

this.state不会按预期更新

3 个答案: