來自API的useState回傳一個空陣列

我在從 API 填充資料時遇到一些問題。當我 console.log 狀態“dataFromApi”時，它作業得很好。意思是，我得到了多個物件的 arr 。

但是，我隨后將狀態中的 API 資料插入“columnsFromBackend”、“items”部分。然后，當我控制臺記錄頁面底部的“columns”狀態時，它只是來自“columnsFromBackend”的所有資料，它回傳所有 hardCodedData，但不是來自 API 的資料。

意思是，我只是收到一個空陣列。這是 console.log(columns) 的輸出。關于這里可能發生的事情有什么建議嗎？

    const [dataFromApi, setDataFromApi] = useState([]);

    useEffect(() => {
        getLeadsClApproved().then((resp) => {
            setDataFromApi(resp.data);
        });
    }, []);

    const hardCodedData = [
        {
            id: uuid(),
            business_name: "Canva",
            first_name: "Melanie",
            last_name: "Perkins",
            created_at: "15th of Nov., 2022",
        },
        {
            id: uuid(),
            business_name: "Microsoft",
            first_name: "Bill",
            last_name: "Gates",
            created_at: "15th of Nov., 2022",
        },
    ];

    const columnsFromBackend = {
        [uuid()]: {
            name: "In Progress",
            items: hardCodedData,
        },
        [uuid()]: {
            name: "CL Approved",
            items: dataFromApi,
        },
        [uuid()]: {
            name: "CL Declined",
            items: [],
        },
        [uuid()]: {
            name: "Awaiting Response",
            items: [],
        },
        [uuid()]: {
            name: "Interview Scheduled",
            items: [],
        },
        [uuid()]: {
            name: "Accepted",
            items: [],
        },
        [uuid()]: {
            name: "Rejected",
            items: [],
        },
    };

    const [columns, setColumns] = useState(columnsFromBackend);
    console.log(columns); // logs the columns with its content

uj5u.com熱心網友回復：

狀態變數在初始渲染columns時使用 的值進行初始化。columnsFromBackend在隨后的渲染中（比如當 API 資料回傳時，導致效果呼叫setDataFromApi），columnsFromBackend更新為 的新值dataFromApi，但狀態值columns不是。這是如何useState作業的。傳遞給的引數useState提供了一個初始值，但對該初始化值的更改不會自動通過。在這種情況下，更新狀態值的唯一方法columns是呼叫setColumns. 您可以添加另一個效果與 同步columns，dataFromApi但我會提出類似的建議（我假設您希望uuid您生成的 ' 在渲染中保持穩定）：

const [dataFromApi, setDataFromApi] = useState([]);
const [uuids] = useState(() => ({
    canvaUuid: uuid(),
    microsoftUuid: uuid(),
    inProgressUuid: uuid(),
    clApproveUuid: uuid(),
    clDeclinedUuid: uuid(),
    awaitingResponseUuid: uuid(),
    interviewScheduledUuid: uuid(),
    acceptedUuid: uuid(),
    rejectedUuid: uuid(),
}));

useEffect(() => {
    getLeadsClApproved().then((resp) => {
        setDataFromApi(resp.data);
    });
}, []);

const columns = React.useMemo(() => {
    const hardCodedData = [
        {
            id: uuids.canvaUuid,
            business_name: "Canva",
            first_name: "Melanie",
            last_name: "Perkins",
            created_at: "15th of Nov., 2022",
        },
        {
            id: uuids.microsoftUuid,
            business_name: "Microsoft",
            first_name: "Bill",
            last_name: "Gates",
            created_at: "15th of Nov., 2022",
        },
    ];
    return {
        [uuids.inProgressUuid]: {
            name: "In Progress",
            items: hardCodedData,
        },
        [uuids.clApproveUuid]: {
            name: "CL Approved",
            items: dataFromApi,
        },
        [uuids.clDeclinedUuid]: {
            name: "CL Declined",
            items: [],
        },
        [uuids.awaitingResponseUuid]: {
            name: "Awaiting Response",
            items: [],
        },
        [uuids.interviewScheduledUuid]: {
            name: "Interview Scheduled",
            items: [],
        },
        [uuids.acceptedUuid]: {
            name: "Accepted",
            items: [],
        },
        [uuids.rejectedUuid]: {
            name: "Rejected",
            items: [],
        },
    };
}, [uuids, dataFromApi]);

console.log(columns); // logs the columns with its content

在這里使用useMemo而不是useState保證columns始終與dataFromApi.

標籤：javascript节点.js反应表示

上一篇：為什么我收到：錯誤[ERR_HTTP_HEADERS_SENT]：在將標頭發送到客戶端后無法設定標頭

下一篇：從api獲取好友并在前端顯示