React类组件转函数组件求助：useState与useEffect使用异常排查

我来帮你梳理下代码里的几个关键问题，这些都是刚上手Hooks时很容易踩的坑：

问题1：useState初始值误用异步函数导致状态异常 #

你在useState里直接调用了getWeather()，但getWeather是异步操作，返回的是Promise对象，不是实际的天气数据。这就导致初始的weatherData是一个Promise，而不是包含main.temp的对象，渲染时自然会触发属性访问报错。

正确的做法是把初始状态设为null或者空对象，等异步请求完成后再更新：

const [weatherData, setData] = useState(null);

问题2：getWeather函数未返回异步请求结果 #

你的getWeather里执行了fetch，但没有把这个Promise链返回出去，所以调用getWeather()的时候，其实得到的是undefined，根本拿不到接口返回的数据。需要给函数加上return：

function getWeather(){
  return fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=6e93b3d15872f914c6929fed9ea71e9a')
    .then(data => data.json())
}

问题3：useEffect里更新状态的方式错误 #

你在useEffect里写了setData(getWeather)，这是把getWeather这个函数本身传给了状态，而不是调用它获取的数据。正确的做法是在useEffect里调用getWeather，然后在Promise的回调里用setData更新状态：

useEffect(() => {
  getWeather().then(data => {
    setData(data);
  });
}, []);

问题4：渲染时未处理数据未加载的状态 #

因为数据是异步获取的，初始状态是null，直接访问weatherData.main.temp会报错，需要先判断数据是否存在，再渲染：

return (
  <div>
    {weatherData ? weatherData.main.temp : 'Loading...'}
  </div>
)

修正后的完整代码 #

import React, { useState, useEffect } from 'react';

const App = function() {
  function getWeather(){
    return fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=6e93b3d15872f914c6929fed9ea71e9a')
      .then(data => data.json())
  }

  const [weatherData, setData] = useState(null);

  useEffect(() => {
    getWeather().then(data => {
      setData(data);
    });
  }, []);

  return (
    <div>
      {weatherData ? `${weatherData.main.temp} K` : 'Loading weather data...'}
    </div>
  )
}

export default App;

简单总结下：Hooks里处理异步数据，不要在useState里直接用异步函数初始化，而是用useEffect触发异步请求，拿到数据后再更新状态，同时一定要处理数据未加载的边界情况，避免报错。

内容的提问来源于stack exchange，提问作者Ron Southin