map函数not 运行 useEffect后设置state为非空列表

Question

我正在尝试从我的节点 js 服务器获取一些数据，returns 给我一个数组。收到此数组后，我想通过它进行映射并使用此数据显示同一组件的多个迭代。但是，map 函数不会运行因为我设置的初始状态值是一个空数组。我的问题是，为什么在 useEffect 函数中更改状态后 map 函数运行ning 没有？这是代码：

const [groupData, setGroupData] = useState([]);

useEffect(() => {
    const func = async () => {
        const fetchData = await fetch("http://localhost:5000/api/get-groups", {
            method: "GET",
            credentials: "include",
            headers: {
                "Content-Type": 'application/json',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
            }
        })

        const jsonFetch = await fetchData.json();
        setGroupData(jsonFetch.groupData);
    }

    func();
}, [])

return (
    {groupData.map((elem) => {
        <Card data={elem} />
    })}
)

但是卡片根本看不到。我可以 console.log 看到进入反应的数据按预期进行。我还尝试将 useEffect 函数的第二个参数更改为 [groupData] 而不是 []。但它仍然不起作用。任何帮助，将不胜感激。谢谢！

Answer 1

您似乎没有return .map() 方法中的任何内容。尝试这样做（去掉大括号）：

return (
    {groupData.map((elem) => <Card data={elem} /> )}
)

此外，建议在呈现列表时添加 uniq 键(https://reactjs.org/docs/lists-and-keys.html)

Answer 2

当您使用 async 函数时，您必须仅在请求的内容被传送时才继续您的逻辑。您必须实现 then 函数，如下例所示：

const [groupData, setGroupData] = useState([]);

useEffect(() => {
    const func = async () => {
        fetch("http://localhost:5000/api/get-groups", {
            method: "GET",
            credentials: "include",
            headers: {
                "Content-Type": 'application/json',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
            }
        }).then(response => {
           setGroupData(response.json().groupData);
        }).catch(e => {
            // Ops, there's a problem...
        });
    }
    func();
}, [])

return (
    {groupData.map((elem) => {
        <Card data={elem} />
    })}
)

[]s

Answer 3

因为组件渲染时groupData还没有数据。试试下面的代码：

const [groupData, setGroupData] = useState([]);

useEffect(() => {
    const func = async () => {
       try{
           const fetchData = await fetch("http://localhost:5000/api/get-groups", {
            method: "GET",
            credentials: "include",
            headers: {
                "Content-Type": 'application/json',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
            }
        })

        const jsonFetch = await fetchData.json();
        setGroupData(jsonFetch.groupData);
        } catch (err){console.log(err)}; //<== Add try...catch to avoid app crash and catch error!          
    }

    func();
}, [])

return (
    {groupData?.map((elem, index) => {
        <Card key={index} data={elem} />
    })} //<== add "?" after groupData and key attribute in <Card /> !
)

map函数not 运行 useEffect后设置state为非空列表

Map function not running after useEffect sets the state to a non-empty list

javascript

node.js

reactjs

fetch-api