时间戳

首页 > 解决方案 > 在本机反应中将 url 参数注入 API 调用

reactjs - 在本机反应中将 url 参数注入 API 调用

问题描述

我将一些参数从一个页面传递到另一个页面以进行 API 调用。我注意到的是，当我对我想进入 http 调用的值进行硬编码时，我得到了想要的结果，但是当我将参数中的值注入到调用中时，如果无法正常工作。所以我认为参数无法通过，直到我在渲染函数中发出警报，我意识到警报提示两次，第一个是空的，第二个提示带来上一页的值，所以意思在我的 componentDidMount 中，调用

state = {
  modalVisible: false,
  posts : [],
  itemID: ''
}

   componentDidMount = () => {
      const { navigation } = this.props;
      this.setState({itemID : navigation.getParam('itemID')})
      api.get('/items/'+`${this.state.itemID}`+'/test_items_details/'+`${userID}`+'/posts').then((response) => {
        let data = response.data.data
        this.setState({posts: data})
        console.log(JSON.stringify(this.state.posts))
      })
    }

标签： reactjsreact-native

解决方案

根据文档，它指出

setState() 并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用 setState() 之后立即读取 this.state 是一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))，它们都保证在应用更新后触发。如果您需要根据之前的状态设置状态，请阅读下面的 updater 参数。

您的代码片段试图在状态变量实际上已更新之前访问它。

你可以在这里做两件事：

  1. 只需使用navigation.getParam('itemID')，现在您的 URL 变为/items/${navigation.getParam('itemID')}/test_item_details/${userID}/posts.
  2. 使用setState回调，代码片段添加在下面。

片段：

this.setState({ itemID: navigation.getParam('itemID') }, () => {
  // this.state.itemID is now set, you can make your API call.
});

如果您使用 this.state.itemID 的唯一意图是用于 URL，我会选择第一个选项。

推荐阅读