Question

我有2个api

第一个api：http://myIP/api/scategories

包含“ id_scategories”和“ name_scategories”，我使用此api通过获取数据来显示本机反应中的所有“ name_scategories”

第二个api：http://myIP/api/services/ {id_scategories}

包含“ service_id”，“ service_name”，“ id_scategories”的

现在我要执行此功能：

onPress在react native中显示的'name_scategories'中获取该名称的ID，然后在另一个页面中显示该ID的所有服务

我该怎么做？

这是代码

componentDidMount(){
    return fetch('http://myIP/api/scategories')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson.data,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

返回时

<FlatList
          data={this.state.dataSource}
       renderItem={({item}) =>
  <TouchableOpacity  onPress= {() => navigate('service')}>
<View>
<Text>{item.name_scategories}</Text>
</View></TouchableOpacity>

Answer 1

在获取API 1之后，this.state.dataSource是[id_scategories，name_scategories]的数组。您可以使用此：

<FlatList
      data={this.state.dataSource}
      renderItem={({item}) =>
           <TouchableOpacity onPress= {() => navigate('service', {id:item.id_scategories})}>
               <Text>{item.name_scategories}</Text>
           </TouchableOpacity>
      }
/>

在service中，您可以获得id_scategories并像这样获取第二个API。

componentDidMount(){
    let id_scategories = navigation.getParam('id', 0);
    return fetch('http://myIP/api/scategories/' + id_scategories)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          services: responseJson.data,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

现在，您可以在this.state.services中显示Flatlist。我没有运行此代码，可能有一些语法错误... 希望对您有所帮助。

按下时获取ID并显示此ID的名称react native

1 个答案: