ReactJs 无法获取异步内容形式 api 在 useEffect 中调用并稍后在组件中使用它

Question

我迷路了。我已经尝试了几乎所有我知道的。在我的另一个组件中，类似的过程工作正常，但在这个组件中，显然有一些错误的实现。我有一个 Context Provider，并设置了两个要共享的值，一个调用 Api 并检索联系人列表 (getContactsList) 的函数，以及一个变量我把联系人列表放在哪里 (contactsList)。我在 useEffect 中调用 getContactsList。后来，我可以使用 contactsList 变量，但始终是一个空数组。我知道问题可能与 Promises 和异步函数有关，但我在我的代码中找不到错误。

我在这里留下了组件的副本，从有问题的视图组件开始：

详细信息组件：

function ContactDetail() {
    
    const { getContactsList, contactsList } = useContext(ContactsContext);
    const { id } = useParams();
    useEffect(() => { getContactsList().catch(null) }, []);

    const contact = contactsList?.filter(c => {
        return (Number(c.id) === Number(id))
    });

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

Api通话

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) {
        Promise.reject(err);
    }
    }

提供商

function ContactsProvider({ children }) {

    const [ contactsList,setContactsList ] = useState([]);

    const getContactsList = async () => {
        try {
            const contactsResult = await apiCall("https://fakeurl.com");
            setContactsList(contactsResult);
        }
        catch(err) {
            setContactsList([]);
        }};

    return (
        <ContactsContext.Provider value={{getContactsList, contactsList}}>
            {children}
        </ContactsContext.Provider>
    );
}

另外，代码在我的GitHub：https://github.com/thenablyn/local-search-browser.git

Answer 1

此代码似乎不在您的存储库中，但我已经测试了您编写的内容并且它似乎有效，来自 useParams 的 id 是否有可能不匹配筛选时的任何联系人？

Answer 2

错误是我在执行array.filter()方法时忘记获取第一个元素。这是一个小错误。

该作业中的代码必须如下所示：

const [contact] = contactsList.filter(...); //this get the first element and assign to constant "contact"

ReactJs 无法获取异步内容形式 api 在 useEffect 中调用并稍后在组件中使用它

ReactJs can't get async content form api call in useEffect and use it later in component

async-await

reactjs

fetch-api

use-effect