ReactJS state 未更新使用效果

Question

我正在构建一个带有functions的ReactJS项目，当我导航到另一个页面时，将 props 的值设置为状态，但随后当我单击一个用于记录这些变量的按钮时，会将它们记录为空。

import React, { memo, useState, useEffect } from 'react';
import { axios } from '../constants/axios';
import { Table, Button } from 'antd'
import { baseUrl } from '../constants';

const Component = memo(function Component(props) {

    const [isLoading, setLoading] = useState(true);
    const [appToken, setAppToken] = useState("");
    const [eventToken, setEventToken] = useState("");
    const [columns, setColumns] = useState([])
    const [dataSource, setDataSource] = useState([]);

    useEffect(() => {
        console.log("app token > ", props.location.appToken)
        console.log("event token > ", props.location.eventToken)

        if (props.location.appToken === undefined || props.location.eventToken === undefined) {
            props.history.push("/home")
            return
        }


        console.log("props location appToken > ", props.location.appToken);

        setAppToken(props.location.appToken)
        setEventToken(props.location.eventToken)


        async function asyncNetworkCall() {
            await networkCall();
        }

        asyncNetworkCall();

    }, [])


    const detailOnClick = (event, token) => {
        event.preventDefault();

        console.log("token => ", token);
        console.log("app token > ", appToken);
        console.log("tracker token > ", token);
    }



    const networkCall = async () => {
        var allColumns = [
                {
                    title: 'Tracker Name',
                    dataIndex: 'TrackerName',
                    key: 'TrackerName',
                    render: (obj) => {
                        return <Button onClick={e => detailOnClick(e, obj.token)}>{obj.name}</Button>
                    }
                },
                {
                    title: "Token",
                    dataIndex: "token",
                    key: "token"
                },
            ]
    }


    return (
        <div style={{ display: "flex", flex: 1, width: "100%", height: "100%" }}>
            {isLoading && <p>This is Loading</p>}
            {!isLoading && <Table style={{ flex: 1 }} dataSource={dataSource} columns={columns} />}
        </div>
    )
})

export default Component;

当useEffect起作用时， appToken和eventToken在控制台中成功记录（ props.location.variables ），但它不能分配给useState变量。

我在组件中缺少什么？ 这段代码有什么问题？

提前致谢！

Answer 1

Ciao，我在您的代码中看不到任何错误。 但是您正在使用一个higher order component (memo(...)) 来记忆您的组件。 尝试实现一个Pure component （我的意思是删除备忘录）。 可以解决你的问题。

Answer 2

您的道具未更新或仅更新两次的原因，首先使用useState初始化，然后使用 useEffect 初始化一次，是useEffect和setEventToken可以访问setAppToken和props.location.appToken的过时值， props.location.eventToken未标记位置作为useEffect的依赖项。 因此，在useEffect scope 中，您不会获得这些道具的更新值。

此外，与您的问题无关，但您不想在useEffect挂钩中进行async-await 。 您只需进行该网络调用，当您获得响应时，您的组件将重新呈现，因为响应会导致组件的道具更新