如何在Fetch数据更新useState前避免Null/Undefined，解决类型错误

你遇到的错误核心是代码中某个环节传入了null/undefined给需要数组类对象的方法（比如Array.from），要从根源上避免这种情况，需要在数据请求前、请求后、更新state前三个关键节点做处理：

关键处理步骤 #

1. 确保遍历的是有效数组
   你的devices可能为null/undefined，直接用devices?.map()会返回undefined，而Promise.all需要接收可迭代的数组对象。改用(devices ?? [])来兜底，确保map始终在数组上执行：

   (devices ?? []).map((id) => { /* ... */ })
   

2. 统一处理请求失败的情况
   每个fetch的catch不要只打印错误，返回一个标记值（比如null），这样Promise.all的结果数组里不会混入未处理的异常，而是统一用null表示失败项：

   .catch((error) => {
       console.error(error);
       return null; // 标记失败请求
   })
   

3. 更新state前过滤无效数据
   在调用setItem之前，过滤掉结果数组中的null和undefined，确保存入state的都是有效数据：

   const filteredData = rA.filter(item => item != null);
   setItem(filteredData);
   

4. 初始化useState为空数组
   给state一个默认空数组，避免初始状态为undefined，后续操作数组时不会触发类型错误：

   const [item, setItem] = useState([]);
   

修改后的完整代码 #

const [item, setItem] = useState([]);
 
async function fD() {
    try {
        // 确保map基于有效数组执行
        const requests = (devices ?? []).map((id) => {
            return fetch("https://jsonplaceholder.typicode.com/posts/1")
                .then((response) => {
                    // 额外检查响应是否成功，避免解析错误响应
                    if (!response.ok) throw new Error(`请求失败: ${response.status}`);
                    return response.json();
                })
                .then((data) => {
                    // 若API返回null/undefined，同样标记为无效
                    return data != null ? data : null;
                })
                .catch((error) => {
                    console.error(error);
                    return null;
                });
        });
        
        const rA = await Promise.all(requests);
        // 过滤所有null/undefined项
        const filteredData = rA.filter(item => item != null);
        setItem(filteredData);
    } catch (error) {
        console.log(error);
    }
}

额外说明 #

如果API返回的数据本身可能包含null/undefined字段，你还可以在response.json()之后添加更细粒度的过滤，比如只保留符合预期结构的数据，进一步避免后续处理出错。

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