Question

下面是分配的初始状态

...
    alert: you_alert_name
    expr: sum(kube_pod_init_container_status_restarts_total{namespace!~"kube-public|kube-system|default|..."}[10s]) > 5
...

下面是我设置的设置状态，最后设置为设置状态（设置为未设置时以注释形式）。我无法访问外部的state = { movie : null, actors : null, directors : [], loading : false }。

this.state

如何获取具有更新信息的this.setState({movie:result},() => { //then fetch the actors const endpoint= `${API_URL}movie/${this.props.match.params.movieId}/credits?api_key=${API_KEY}`; fetch(endpoint) .then(result => result.json()) .then(result=>{ const directors =result.crew.filter((member)=> member.job==='Director' ); this.setState({ actors : result.cast, directors, loading : false }) console.log(this.state); //here value is coming }) })console.log(this.state); //here value is not coming值？

this.state

Answer 1

您正在体验的是使用异步函数的结果。每当设置状态时，都会调用传递给this.setState()的回调，并且在调用this.setState()到实际更新状态之间可能会有延迟。这意味着当您到达第二个console.log()时，回调可能会执行，也可能不会执行。

这说明了为什么您看到这些结果。实际上，第一个console.log()在第二个console.log之后是。

Answer 2

这是反应生命周期！ setState函数不会立即执行。内部console.log会打印出良好的值，因为您可以在setState的回调中执行它。外部console.log是在setState实际上修改状态之前执行的，因此您看不到更新的信息。

Answer 3

您所看到的实际上是预期的结果，这是因为一般而言Javascript和特定的访存API调用是异步的。您的第一个console.log（）位于提取请求的响应中，因此仅在服务器返回响应（可能是几秒钟或更长时间）后才执行，然后设置状态，然后使用控制台进行打印。日志。第二个console.log在外部，并且实际上会立即打印，甚至在进行异步API调用之前，实际上尚未更新状态之前。因此，我建议设置状态后要执行的任何操作都应该在第一个console.log所在的位置进行。或者最好在回调中像这样，您可以传递给this.setState以确保状态已更新。

this.setState({movie:result},() => {
                      //then fetch the actors
                      const endpoint= `${API_URL}movie/${this.props.match.params.movieId}/credits?api_key=${API_KEY}`;
                      fetch(endpoint)
                      .then(result => result.json())
                      .then(result=>{
                        const directors =result.crew.filter((member)=> member.job==='Director' ); 
                        this.setState({
                            actors : result.cast,
                            directors,
                            loading : false
                        },()=>{
                        // API Call has returned and state has been updated
                        // Now access this.state 
                        });
                      })         
                  })

Answer 4

setState操作是异步的，您可以在react documentation中详细了解它。

您要解决什么问题？可能您需要使用钩子componentDidUpdate或仅在下一个渲染调用中使用此值。

Answer 5

我认为您应该重新考虑代码，因为结果将无法像您放置电影那样到达电影中。除了以某种方式更新API函数中的另一个状态以获取电影。因此，您可以通过某种方式调用必须已绑定到类的fetch this.fetch = this.fetch.bind（this）来自onclick或onchange之类的东西。

fetch =() =>{

        const endpoint= `${API_URL}movie/${this.props.match.params.movieId}/credits?api_key=${API_KEY}`;
        fetch(endpoint)
        .then(result => result.json())
        .then(result=>{
          const directors =result.crew.filter((member)=> member.job==='Director' ); 
          this.setState({
              actors : result.cast,
              directors,
              loading : false,
              movies:result
          })


        }) 

  }

ReactJs：Setstate不更新状态

5 个答案: