Question

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

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（备忘（...））来记住您的组件。尝试实现Pure component（我的意思是删除备忘录）。可以解决您的问题。

Answer 2

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

此外，也没有链接到您的问题，但是您不想在async-await钩中插入useEffect。您只需拨打网络电话，当您获得响应时，组件将重新呈现，因为响应会导致组件的道具更新

ReactJS状态未在useEffect中更新

2 个答案: