如何在 React Native 的 fetch 方法中从 json 中提取键和值？答案

【问题标题】：How to extract key and value from json in fetch method in React Native?如何在 React Native 的 fetch 方法中从 json 中提取键和值？
【发布时间】：2021-02-08 22:49:08
【问题描述】：

我是 React Native 的新手。我想用 fetch 从 json 中提取一个值来做一个简单的测试。但我不明白，如何从 Json 中选择特定的键。总是，我有未定义的回报。我试图用this post 修改我的代码，但它不起作用。我之前尝试过解析，但他不想要，因为它已经是一个对象了。

这是我的代码：

checkLogin = () => {

    const { name } = this.state;
    const { surname } = this.state;

    fetch('https://ffn.extranat.fr/webffn/_recherche.php?go=ind&idrch=' + name + '%20' + surname, {
        method: 'GET',
    }).then((response) => response.json())
        .then((responseJson) => {
            if (responseJson.ind == 'Individu non trouv\u00e9 !') {
                alert("Id incorrect")
            }
            else {
                alert("Id correct");
            }
            alert(JSON.stringify(responseJson.ind))

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

}

这是我的 JSON 格式：

[{"iuf":"1366701","ind":"LEBRUN L\u00e9o (2000) H FRA - CN BEAUPREAU","sex":"#1e90ff","clb":"CN BEAUPREAU"}]

我知道我的请求有效，因为当我运行此代码alert(JSON.stringify(responseJson))时，它会返回整个 json。所以我不知道，如何解决未定义的返回。

问候

【问题讨论】：

标签： json react-native fetch

【解决方案1】：

你的json是一个数组，如果里面有多个项目，你要么需要循环遍历它，要么只使用responseJson[0]来读取它。因此，如果您想读取 json，您的代码将如下所示：

const checkLogin = () => {
    const { name } = this.state;
    const { surname } = this.state;

    fetch(
      "https://ffn.extranat.fr/webffn/_recherche.php?go=ind&idrch=" +
        name +
        "%20" +
        surname,
      {
        method: "GET"
      }
    )
      .then(response => response.json())
      .then(responseJson => {
        // Since you have only one object inside your json, you can read the first item with 'responseJson[0]'.
        if (responseJson[0].ind == "Individu non trouv\u00e9 !") {
          alert("Id incorrect");
        } else {
          alert("Id correct");
        }
        alert(JSON.stringify(responseJson[0].ind));

        // If you have multiple elements inside your responseJson, 
        // then here is a loop example :

        // responseJson.forEach(item => {
        //   console.log('item ind = ', item.ind);
        // });
      })
      .catch(error => {
        console.error(error);
      });
  };

【讨论】：

感谢您的回答。好的，所以不可能从 Json 中提取“ind”的值。我需要做一个循环，但每次我只有一个对象，所以我如何读取“ind”的值，例如。对于循环，大括号之间的数据只是一个值，对吧？我不明白为什么responseJson[0] 会起作用？我已经用responseJson 获得了相同的回报。
@MathisPoirier 是的，你是对的。 responseJson[0] 将读取数组的第一项。如果您确定只有一个，那么可以这样做。否则，你将不得不做一个循环。我编辑了我的答案给你一个例子；）
非常感谢！！！我恨我，解决办法就是这么简单。我测试了很多代码。最好的问候

【解决方案2】：

使用async await.

const checkLogin = async () => {
    const { name } = this.state;
    const { surname } = this.state;

    const request =  await fetch(
      "https://ffn.extranat.fr/webffn/_recherche.php?go=ind&idrch=" +
        name +
        "%20" +
        surname)
    const response = await request.json();
    console.log('result from server', response)
}

【讨论】：

感谢您的回答。它适用于昆汀的解决方案，但如果我有一些问题或其他相同的情况，我会保留你的解决方案。最好的问候。