React中API获取变量初始为undefined，VS Code重存后恢复正常的问题

你在开发Pokémon相关组件时，遇到了一个奇怪的问题：从API获取数据后，species变量偶尔会出现undefined的情况，初始状态也可能未定义，但在VS Code中重新保存代码触发热重载后，变量又能正常拿到值。你的代码如下：

function Pokemon() {
    const { id } = useParams();
    const [poke, setPoke] = useState({})
    const [pokestats, setPokestats] = useState([]);
    const [species, setSpecies] = useState('')
    let types = []

    async function getPokeData() {
        const { data } = await axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`)
        setPoke(data)
        setSpecies(data?.species?.url)
    }
    useEffect(() => {
        getPokeData();
    }, [])
}

// 渲染部分
<div>
    <PokeEvolve species={species} />
</div>

问题原因 #

1. 异步请求时序问题：API请求是异步操作，组件首次渲染时getPokeData还未执行完成，species保持初始空字符串。如果API返回的数据中data.species?.url不存在（比如请求延迟、返回结构异常），就会导致species被设置为undefined。
2. 热重载的误导：保存代码触发热重载时，之前的API请求可能已经完成，组件重新渲染时species已有值，这让你误以为“保存后就正常”，但这只是巧合，不是根本解决办法。
3. 依赖数组不完整：useEffect的依赖数组是空的，仅在组件首次挂载时执行getPokeData。如果路由参数id发生变化，组件不会重新请求数据，可能导致旧数据或undefined残留。

解决方案 #

1. 补全useEffect的依赖数组

把id加入依赖数组，确保路由参数变化时重新请求数据：

useEffect(() => {
    getPokeData();
}, [id]) // 新增id作为依赖

2. 处理加载状态，避免子组件接收undefined

添加加载状态，在数据未加载完成时显示加载提示，防止PokeEvolve组件收到undefined的值：

function Pokemon() {
    const { id } = useParams();
    const [poke, setPoke] = useState({})
    const [pokestats, setPokestats] = useState([]);
    const [species, setSpecies] = useState('');
    const [loading, setLoading] = useState(true); // 新增加载状态

    async function getPokeData() {
        try {
            const { data } = await axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`);
            setPoke(data);
            setSpecies(data?.species?.url || ''); // 兜底空字符串，防止undefined
            setLoading(false);
        } catch (error) {
            console.error('获取Pokémon数据失败:', error);
            setLoading(false);
        }
    }

    useEffect(() => {
        getPokeData();
    }, [id])

    // 渲染时判断加载状态
    return (
        <div>
            {loading ? (
                <div>加载中...</div>
            ) : (
                <PokeEvolve species={species} />
            )}
        </div>
    )
}

3. 对API返回值做兜底处理

使用|| ''确保setSpecies不会传入undefined，即使API返回的data.species?.url不存在，也能保持species为初始的空字符串：

setSpecies(data?.species?.url || '');

总结 #

本质问题是异步数据加载的时序管理和React Hook依赖数组不完整导致的。热重载只是让你看到了请求完成后的状态，并不是解决问题的方法。通过补全依赖、添加加载状态和兜底值，就能彻底解决变量undefined的问题。

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