我的 api 函数在另一个文件或目录中我想在 react native 的另一个文件或目录中检查我的 api 响应数据答案

【问题标题】：my api function is in another file or directory i want to check my api response data in another file or directory in react native我的 api 函数在另一个文件或目录中我想在 react native 的另一个文件或目录中检查我的 api 响应数据
【发布时间】：2021-04-08 19:55:12
【问题描述】：

我是 React Native 新手，请忽略我的英语

我创建了两个名为 Browse.js 和 Setting.js 的文件，我在 Browse.js 中编写了我的 API 函数，并从这些函数导航到 setting.js 和 setting.js。现在我想检查来自我在browse.js中声明的API的响应数据，并根据该数据我想呈现一个块。例如是 "title"="admin" 然后渲染这个。

这是我在 Browse.js 中的 API 函数 =

 RoleLogin(){
    // const { username, password, roles } = this.state;
    fetch('https://jsonplaceholder.typicode.com/todos/1'
    // fetch("https://nasdigital.tech/Android_API_CI/validate_login_details"
    , {
      method: "GET",
      headers: { "Content-Type": "application/json" },
      // body: JSON.stringify([{ username: username, password: password }]),
    })
    .then(response => response.json())

    .then((json) => {
      //login to check details from server and then display or navigate to another screen
      // if (json != "error")
      if (json != "error")
      // if (response && response.length && response[0].message != "error")
      {
        alert(JSON.stringify(json));
        this.props.navigation.navigate("Settings");
      } else {
        alert("Cehck Details");
      }
    })

    .catch((error) => alert("Cehck Details"));
  }
    //*******************navagte to setting when data fetch close**************************** */

  componentDidMount() {
    this.setState({ categories: this.props.categories });
  }

这是我在 Setting.js 中的块，如果 title='something' 或 role='admin' 我想呈现它

  {title == " " &&
            <Block row space="between" margin={[10, 0]} style={styles.inputRow}>
              <Block style={{ flexDirection:'row'}}>
                <Text gray2 style={{ marginBottom: 10 }}></Text>
                <Foundation name="page-copy" size={24} color="black" />
                <Text bold style={{paddingHorizontal: 20 }}>Customer Report</Text>
              </Block>
            </Block>
            }

【问题讨论】：

能否提供相关代码？
是的，我已经更新了，请检查

标签： reactjs react-native native

【解决方案1】：

您可以在通过参数导航时发送数据。

 this.props.navigation.navigate("Settings",{data:apiData})

在 Setting.js 上，您可以根据 ReactNavigation 版本以不同的方法接收参数数据。对于版本 5

let data = props.route.params?.data;

【讨论】：

【解决方案2】：

您可以在导航时将数据作为路由道具发送到其他组件，如下所示：

  this.props.navigation.naviagte('ScreenYouWantToNavigate',{ data:dataToSend });

并按如下方式访问目标组件中的数据

  console.log(this.props.route.params.data);

【讨论】：

我是否需要在正文中为“dataToSend”添加一些东西
dataToSend 应该包含您要发送到下一个屏幕的所有数据