如何将消耗的 API 响应发送到另一个组件？

Question

我正在使用 Weatherbit API 制作 web-aap。我在 App.js 文件中使用 API 响应，然后将其保存到一个状态，然后将该状态传递给另一个组件。但是该组件正在获取该状态的初始值（空对象）而不是 API 响应。看下面的代码。

function App() {

  const [details, setDetails] = useState({ "value": "First" })
  const [url, setUrl] = useState("")

  const fetchWeather = async () => {
    const { data } = await Axios.get(`https://api.weatherbit.io/v2.0/current?city=Modasa&key=24d74085081e4ec7b4971bec0a1f2ef3`)

    // const details = data.data[0]
    console.log(data)
    setDetails(data)
  }

  useEffect(() => {
    fetchWeather()
  }, [])

  return (
    <div className="App">
      <SectionOne data={details} />
    </div>
  );

}

export default App;

** 第二个组件我得到初始值（空对象）**

const SectionOne = ({ data }) => {

  return (
    <div>

      <div className="sectionOne">
        <span className="region">{`${data.data[0].city_name}`}</span>
        <span className="country">{data.data[0].country_code}</span>
      </div>

      <div className="sectionTwo">
        <span className="icon"><img source={data.data[0].weather?.icon} /></span>
        <span className="temp">{data.data[0].temp}</span>
        <span className="unit">°C</span>
        <span className="feels">Feels Like {data.data[0].app_temp} °C | {data.data[0].weather?.description}</span>
      </div>

      <div className="sectionThree">
        <div><span>Wind</span>{data.data[0].wind_spd} KM</div>
        <div><span>Wind Dir.</span>{data.data[0].wind_cdir}</div>
        <div><span>Humidity</span>{data.data[0].current?.humidity} %</div>
        <div><span>Pressure</span>{data.data[0].pres} MB</div>
        <div><span>UV Index</span>{data.data[0].uv}</div>
        <div><span>Visibility</span>{data.data[0].vis} KM</div>
      </div>

    </div>
  )
}

export default SectionOne

Answer 1

您将初始状态设置为 { "value": "First" } 但 SectionOne 组件需要其他格式的数据，请尝试访问属性 data.data[0].city_name这是不存在的。因此你得到错误。

您应该将初始状态设置为空

const [details, setDetails] = useState(null)

并在渲染中检查空值。这是最佳做法。

return (
    <div className="App">
      { details && <SectionOne data={details} /> }
    </div>
  );

如何将消耗的 API 响应发送到另一个组件？

How to send consumed API response to another component?

reactjs

api

axios

use-effect

weather-api