React 的 Hooks 为什么获取不到最新值？

Question

下面代码打印出来是空字符：这难道不是会更新的么：用的是蚂蚁的组件

import { Api_Module_Edit_Prepare, Api_Module_Edit_Save } from "../Request/Module"
import { Input, Card, Form, Row, Col, Space, Collapse, Button, message } from 'antd';
import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import "../Css/Edit.sass"

export function Component() {

    const navigate = useNavigate();
    const { module = "", id = 0 } = useParams();
    const [primary] = Form.useForm();
    const [messageApi, contextHolder] = message.useMessage();
    const [tableActive, setTableActive] = useState<string>(``)
    const [tableData, setTableData] = useState<Record<string, React.ReactNode>>({})
    const [tabList, setTabList] = useState([]);

    const onFinish = (data: any) => {
        const params = { table: tableActive, data: data }
        Api_Module_Edit_Save(module, [params]).then((res) => {
            messageApi.success("保存成功")
        })
    }

    // 渲染：表单【 主表 + 子表 】：Card
    const formatTableData = (data: any) => data.reduce((loop: any, item: any, index: number) => ({
        ...loop,
        [item.table_name]: index === 0 ? renderFormItem(item) : renderTableItem(item)
    }), {});

    // 渲染：标签【 主表 + 子表 】
    const formatTableTabs = (data: any) => data.map((item: any) => ({
        key: item.table_name,
        tab: item.display_name,
    }))

    // 渲染：主表表单
    const renderFormItem = (table: any) => {
        const renderFormItem = (columns: any) => columns.map((column: any) => (
            <Col span={6} key={column.id}>
                <Form.Item label={column.display_name} name={column.attr_name}>
                    <Input maxLength={100} placeholder={`请输入`} disabled={column.build_in == 1} />
                </Form.Item>
            </Col>
        ))
        return (
            <Form form={primary} name="project" onFinish={onFinish}>
                {table.sections.map((section: any) => (
                    <Collapse
                        key={section.id}
                        defaultActiveKey={['1']}
                        items={[{
                        key: section.id,
                        label: section.display_name,
                        children: <Row gutter={[16 ,16]} key={section.id}>{renderFormItem(section.columns)}</Row>
                    }]} />
                ))}
            </Form>
        )
    }

    // 渲染：子表数据
    const renderTableItem = (data: any) => data.map((item: any) => ({

    }))

    // 渲染：公共操作
    const renderPublicActions = [
        <Space>
            <Button type={`dashed`} onClick={() => navigate(-1)}>返回</Button>
            <Button type={`primary`} onClick={() => primary.submit()}>保存</Button>
        </Space>
    ]

    useEffect(() => {
        Api_Module_Edit_Prepare(module).then((res) => {
            setTableData(formatTableData(res.form))
            setTabList(formatTableTabs(res.form))
            setTableActive(res.form[0].table_name)
        })
    }, [module])

    return (
        <div className={`edit`}>
            <Row gutter={[16, 16]}>
                {contextHolder}
                <Col span={24}>
                    <Card
                        actions={renderPublicActions}
                        tabList={tabList}
                        activeTabKey={tableActive}
                        tabProps={{ size: 'middle' }}
                        bodyStyle={{ padding: "15px"}}>
                        {tableData[tableActive]}
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

Component.displayName = "Edit";
}, [module])

Answer 1

这里的设计存在一定的问题

• onFinish 依赖了 tableActive
• 而 onFinish 又是在 setTableData(formatTableData(res.form)) 中被引用的
• 首次进入这个 useEffect 的时候，tableActive 肯定是初始值，当请求完成更新 tableActive 后，并不会触发 setTableData(formatTableData(res.form)) 这条逻辑重新执行，所以导致产生了一个过期闭包，onFinish 始终引用的是初次的 tableActive
• 因此这里 tableActive 其实也应该是这个 useEffect 的依赖项

但注意，加上之后，tableActive 变化，这个 useEffect 又会重新执行，会多请求一次，如果tableActive又存在变化的话会导致死循环，所以这块需要考虑下设计是否合理