【问题标题】:Fetch data in ComponentDidMount not working在 ComponentDidMount 中获取数据不起作用
【发布时间】:2017-07-05 05:07:38
【问题描述】:

我正在尝试在 componentDidMount 中获取数据、设置状态和更改路由,但无法完成(仅在单击屏幕后)。我想这与 fetch 的异步性质有关,但如何解决?

componentDidMount(){

AsyncStorage.multiGet([USER_TOKEN, USER_REFRESH_TOKEN,USER_REMEMBERED]).then((data) => {
  const userRemembered = JSON.parse(data[2][1])
  const userAccessToken = data[0][1]
  const userRefreshToken = data[1][1]

  if (userRemembered) {
    fetch("SOME_URL", {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        refreshToken: userRefreshToken
      })
    })
    .then(response => response.json())
    .then(responseData => {
      console.log(responseData); // only after clicking on the screen it is logged
      if (responseData.success) {
        AsyncStorage.multiSet([[USER_TOKEN,responseData.response.accessToken],[USER_REFRESH_TOKEN,responseData.response.refreshToken],[USER_REMEMBERED,JSON.stringify(true)]])
        this.setState({
          token:responseData.response.accessToken,
          refreshToken: responseData.response.refreshToken,
          isLoggedIn: true
        }) //only after clicking on the screen state is changed
        this.changeRoute(this.state) //only after clicking on the clicking on the screen route is changed
      }
      else {
        console.log("API is not responding");
      }
    })
    .catch((error) => {
      console.log(error)
    })
  }
  else{
    console.log('user has not checked Remember Me');
  }
})

}

【问题讨论】:

  • 为了在更新后立即反映状态的变化,您应该在componentDidUpdate()中使用
  • 您的控件是否会转到 componentDidMount?如果是,则 fetch 无法正常工作?
  • @JigarShah 也许我没有正确理解你。您是否建议在componentDidUpdate () 中更改路线?
  • @VikramSaini 承诺有效。在第二个 .then() 之后没有任何效果。如果我点击屏幕上的某个地方,它会起作用,状态会更新,路线也会改变,但页面加载时不起作用,很奇怪。
  • 是的,所有动作都应该放在componentDidUpdate,一旦你设置了状态,它就会反映你放置的位置。

标签: javascript reactjs asynchronous react-native fetch


【解决方案1】:

我终于明白了。我打开了Remote JS Debugging,结果搞砸了。我把它关掉了,一切正常。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-04
    • 2011-10-21
    • 2018-11-28
    • 2016-05-13
    • 2021-01-29
    • 1970-01-01
    相关资源
    最近更新 更多