在useEffect挂钩中发出异步请求

Question

在useEffect中，调用了getList函数，在其中我进行了异步处理。 get请求使用收到的各种数据更新我的socialList状态。在更新状态的帮助下，我想显示接收到的数据。

州

    const [socialList, setSocialList] = useState([]);

useEffect钩的代码

    useEffect(() => {
        getList();
        console.log(socialList);
    }, []);

getList功能的代码

    const getList = () => {
        const token = localStorage.getItem("token");
        const config = {
            headers: {
                "Content-Type": "application/json",
                "x-auth-token": `${token}`
            }
        };
        Axios.get("/api/social", config)
            .then(res =>
                res.data[0].lists.map(list => ({
                    _id: `${list._id}`,
                    link: `${list.link}`,
                    linkName: `${list.linkName}`
                }))
            )
            .then(socialList => {
                setSocialList({ socialList });
            })
            .catch(err => err.message);
    };

问题在于该组件最初呈现时，useEffect由于异步而运行。 getList函数中的请求进一步处理，由于无法显示数据，因此不会更新我的状态。但是，状态会在一段时间后更新，但该组件不会重新呈现。