javascript - 如何从 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 不会接受它。因此，根据您需要从数据中获得什么值(value)，您需要专门针对它。

以下示例从 current 对象的条件对象返回 text 值:“It is Sunny”。

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>
  );

}