ReactJS在useEffect中调用API无法获取异步内容供后续组件使用

以下是代码中存在的4处核心错误及对应修复方案，按优先级排序：

• 第一处：apiCall 函数错误处理逻辑存在缺陷

你在 apiCall 的catch块中仅执行了Promise.reject(err)，但没有return该reject实例，async函数执行过程中如果没有显式抛出错误/返回reject态Promise，catch块执行完后函数会默认返回 resolve 态的undefined。这会导致即便接口请求失败，getContactsList 中的try块也不会触发catch逻辑，最终会把undefined赋值给contactsList，可选链调用filter后得到空值。
修复后的apiCall代码：

async function apiCall (
    url,
    method = "get",
    body,
    headers)
{
   try {
       const response = await fetch(url, {
        method,
        body,
        headers
    });
    const r = await response.json();
    return r;
}
catch (err) {
    // 要么直接throw err，要么return Promise.reject(err)
    throw err;
}
}

• 第二处：列表匹配逻辑错误，空数组为真值导致判断永远命中

Array.filter 永远返回数组，没有匹配结果时返回空数组[]，而JS中空数组属于truthy值，你直接用contact?做判断时，无论是否匹配到结果都会显示「contact finded」，和你想要的逻辑完全相悖。
修复方案：把filter替换为find（返回匹配到的第一个对象，无匹配返回undefined），或者判断返回数组的长度：

// 方案1 用find更符合单条匹配的场景
const contact = contactsList?.find(c => Number(c.id) === Number(id));
// 方案2 继续用filter加长度判断
// const contact = contactsList?.filter(c => Number(c.id) === Number(id))?.length > 0;

• 第三处：useEffect 异步调用无 loading 态兜底，初始渲染时必然拿到空数组

getContactsList 是异步函数，组件首次渲染时接口请求还没返回，contactsList 还是初始的空数组，此时匹配不到结果会直接显示「contact not finded」，即便后续接口返回数据更新了状态，也需要触发重渲染才会更新。建议加加载态判断，避免误判：
修复后的ContactDetail组件示例：

function ContactDetail() {
    const { getContactsList, contactsList } = useContext(ContactsContext);
    const { id } = useParams();
    const [loading, setLoading] = useState(true);

    useEffect(() => { 
      (async () => {
        try {
          await getContactsList()
        } finally {
          setLoading(false)
        }
      })()
    }, []);

    const contact = contactsList?.find(c => Number(c.id) === Number(id));

    if(loading) return <div>加载中...</div>

    return (
        <div>
            {contact? "contact finded" : "contact not finded"}
        </div>
    );
}

• 第四处：需确认接口返回结构是否符合预期

要确认你调用的接口返回的根数据就是联系人数组，如果接口返回的是类似{ code: 200, data: [...], msg: 'success' }的封装结构，直接把整个返回结果赋值给contactsList会导致存储的是对象而非数组，filter调用会失效，需要改成setContactsList(contactsResult.data)才能拿到正确的数组。

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