如何从 React 组件中获取对象

Question

我正在使用 API 制作天气应用程序，我在函数中使用 API 成功接收数据，但我无法将其从函数中取出

这里是代码

import React, {useState} from 'react'
import {Text, View} from 'react-native'
const axios = require('axios');


let HomeScreen =() => {
  let key = "XXXX"
  axios.get(`https://api.weatherapi.com/v1/current.json?key=${key}&q=London&aqi=no`)
  .then(function (response) {
    // handle success
    console.log(response)
  })
  return(
    <Text>This is {response}</Text>
  )
}

export default HomeScreen

Answer 1

如果您想简单地从 API 返回数据，请使用普通的 JS 函数，而不是 React 组件。

function getData() {
  return axios(`https://api.weatherapi.com/v1/current.json?key=${key}&q=London&aqi=no`)
}

它会返回一个你可以在其他地方使用的promise。

async main() {
  const data = await getData();
}

---

如果您希望您的组件渲染从 API 检索到的数据，您需要采取不同的方式。

在组件安装时使用useEffect 运行一次，并在检索到数据后使用useState 存储数据。然后状态会通知 JSX 如何渲染。

请注意，来自 API 的响应是具有 location 和 current 属性的对象。你不能仅仅将它添加到 JSX，因为 React 不会接受它。因此，根据您需要从数据中获得什么价值，您需要专门针对它。

这是一个从current 对象的条件对象返回text 值的示例：“天气晴朗”。

const { useEffect, useState } = React;

function Example() {

  // Initialise your state with an empty object
  const [data, setData] = useState({});

  // Call useEffect with an empty dependency array
  // so that only runs once when the component is mounted
  useEffect(() => {

    // Retrieve the data and set the state with it
    async function getData() {
      const key = 'XXX';  
      const data = await axios(`https://api.weatherapi.com/v1/current.json?key=${key}&q=London&aqi=no`)
      setData(data.data);
    }

    getData();

  }, []);

  // If there is no current property provide a message
  if (!data.current) return <div>No data</div>;

  // Otherwise return the current condition text
  return (
    <p>It is {data.current.condition.text}</p>
  );

}