React函数组件中useEffect异步更新state后取值报错求助

你的代码如下：

const [fact, setFact] = useState();

useEffect( () => {

  async function startGetCatFact () {
    const {fact:factFromApi} = await getCatFact();
    setFact(factFromApi);
  }

  startGetCatFact();

  return 
},[])

const queryWords = fact.split(' ').slice(0, 3); //fact is not defined error

执行时始终报错“fact is not defined”，你认为useEffect已经更新了state，但fact一直是undefined。

错误原因分析 #

• 初始state未赋值：useState()没有传入初始值，所以fact的初始值是undefined。组件第一次渲染时就会执行fact.split()，此时fact是undefined，调用split()方法自然会报错。
• useEffect的执行时机：useEffect是在组件挂载完成后才执行的，这意味着组件第一次渲染时，queryWords的计算逻辑已经跑完了，此时fact还是初始的undefined，根本没等到异步请求返回的结果。
• 另外还有个小问题：useEffect里的return后面直接换行，JavaScript会自动插入分号，导致返回undefined，不过这不是当前报错的直接原因，但也是需要修正的代码规范问题。

解决方案 #

方案1：给fact设置初始值，并添加空值判断

const [fact, setFact] = useState(''); // 初始化为空字符串

useEffect( () => {
  async function startGetCatFact () {
    const {fact:factFromApi} = await getCatFact();
    setFact(factFromApi);
  }
  startGetCatFact();
},[])

// 只有当fact存在时才执行split操作
const queryWords = fact ? fact.split(' ').slice(0, 3) : [];

方案2：使用useMemo依赖fact计算，避免不必要的重计算

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

const [fact, setFact] = useState();

useEffect( () => {
  async function startGetCatFact () {
    const {fact:factFromApi} = await getCatFact();
    setFact(factFromApi);
  }
  startGetCatFact();
},[])

// 依赖fact变化时才重新计算，同时处理undefined的情况
const queryWords = useMemo(() => {
  return fact ? fact.split(' ').slice(0, 3) : [];
}, [fact]);

方案3：条件渲染，等到fact有值后再执行相关逻辑

如果你的组件不需要在fact为undefined时显示内容，可以直接加条件判断：

const [fact, setFact] = useState();

useEffect( () => {
  async function startGetCatFact () {
    const {fact:factFromApi} = await getCatFact();
    setFact(factFromApi);
  }
  startGetCatFact();
},[])

// 当fact不存在时，返回加载状态或空内容
if (!fact) return <div>Loading...</div>;

const queryWords = fact.split(' ').slice(0, 3);

return <div>{queryWords.join(' ')}</div>;

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