React组件调用map时报Cannot read properties of undefined错误怎么解决

问题原因 #

你调用map方法的movies变量在渲染周期的某个时刻变为了undefined。
你初始值虽然设为了空数组、正常请求返回的results也为数组，但只要有一次setMovies传入了undefined就会触发该报错。页面刚加载正常1秒后报错的表现，说明首次请求拿到了正常的数组完成了渲染，后续的状态更新流程中movies被修改为了undefined。你在控制台看到的请求结果为正常内容，是因为浏览器控制台输出的引用类型数据会在你手动展开时才读取最新值，无法体现中间瞬间的状态异常。

解决方案 #

1. 给数据赋值加兜底判断，避免把undefined赋值给movies
   修改useEffect中的请求逻辑，增加异常捕获和字段存在性校验：

useEffect(() => {
    async function fetchData(){
        try {
            const request = await axios.get(fetchUrl);
            // 校验字段存在性，兜底赋值空数组
            setMovies(request?.data?.results || []);
        } catch (err) {
            // 请求异常时也赋值空数组，避免状态异常
            setMovies([]);
            console.error('数据请求失败', err)
        }
    }
    fetchData();
}, [fetchUrl])

2. 渲染时加可选链校验，做双重保障
   修改模板中map调用的部分：

<div className="row__posters">                
    {movies?.map(movie => 
        (<img src={`${base_url}${movie.poster_path}`} alt={movie.name} />)
    )}
</div>

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