反应原生 API 调用答案

【问题标题】：React Native API call反应原生 API 调用
【发布时间】：2021-04-15 17:58:53
【问题描述】：

如何在页面下方的代码中显示 API 调用的结果？

完成后的 {data.payrollid} 未显示任何值。即：文本仅显示“完成”，其后没有值。

我返回的 JSON 看起来像这样...

{"status_code":200,"payrollid":10,"message":"Success"}

当我使用 console.log(data) 时，我可以看到 fetch 工作，并且我可以看到我的 JSON 数组。

下面是我的 React Native 代码

 const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://www.mywebsite.ca/api/test.php')
            .then((response) => response.json())
            .then((data) => console.log(data))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);

  return (
      <>
      <View>
          {isLoading ? <Text>Loading...</Text> : <Text>Complete {data.payrollid}</Text> }
      </View>
    <View style={styles.container}>
      <Text>This is my new app.</Text>
      <Text>Some text</Text>
      <StatusBar style="auto" />
    </View>
      </>
  );

【问题讨论】：

@davies first thing first <div> 在 react-native 中不是有效标签。

标签： react-native fetch

【解决方案1】：

您的代码应如下所示：

const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState({});

    useEffect(() => {
        fetch('https://www.mywebsite.ca/api/test.php')
            .then((response) => response.json())
            .then((data) => setData(data))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);

  return (
    <>
     <View>
        {isLoading ? <Text>Loading...</Text> : 
          <Text>Complete{data.payrollid}.</Text>
        }
    </View>
    <View style={styles.container}>
      <Text>This is my new app.</Text>
      <Text>Your Text</Text>
      <StatusBar style="auto" />
    </View>
  </>
  );

【讨论】：

【解决方案2】：

您需要将数据保存为数据状态。

const [data, setData] = useState({});

useEffect(() => {
    fetch('https://www.mywebsite.ca/api/test.php')
        .then((response) => response.json())
        .then((data) => setData(data))
        .catch((error) => console.error(error))
        .finally(() => setLoading(false));
}, []);

并且由于您获得了一个对象，因此将您的原始状态切换为一个对象。

【讨论】：