this.state не будет обновляться должным образом

Question

Я пытаюсь обновить состояние моего компонента.Он получает некоторые данные о первоначальном монтировании, как и ожидалось, с componentDidMount().У меня есть componentDidUpdate(), который сравнивает prevProps и this.state и будет "повторно извлекать", как ожидалось.Тем не менее, между этими моментами я не знаю, когда повторно выбирать, потому что prevProps и this.state становятся равными, поскольку this.state не обновляется (опять же, потому что idk, где разместить выборку новых данных).

Это на стороне клиента приложенияactjs.

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 обновляется только после загрузки из-за componentDidMount(), а затем сервер обновляется и не знает, куда отправлять данные.

Answer 1

Кажется, вы хотите последнее обновление некоторых данных в вашем компоненте с удаленного сервера.Если это то, чего вы хотите достичь, вы можете просто опрашивать сервер каждые x секунд с помощью setInterval().Сделайте это в вашем 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

пожалуйста, используйте обещание для получения 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>
  )
}

Answer 3

Одна из ваших проблем, кажется, здесь:

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

В реакции, чтобы получить доступ к состоянию, вы должны использовать "{}", чтобы ввести javascript в области рендеринга.Это на самом деле одна из замечательных вещей о реакции вообще.Это позволяет вам получать доступ к переменным из состояния или даже к любому javascript между областями «render () {» и «return ()».

Одной из причин того, что данные не возвращаются, является отсутствие доступа ксреда javascript, поскольку она отображает «this.state.x» как текст, а не как состояние.

Попробуйте

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