来自 API 的 useState 返回一个空数组

Question

我在从 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

Answer 1

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 同步。