React 的 Hooks 为什么获取不到最新值?-灵析社区

小飞侠007

下面代码打印出来是空字符:这难道不是会更新的么:用的是蚂蚁的组件 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(``) const [tableData, setTableData] = useState>({}) 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) => ( )) return ( {table.sections.map((section: any) => ( {renderFormItem(section.columns)} }]} /> ))} ) } // 渲染:子表数据 const renderTableItem = (data: any) => data.map((item: any) => ({ })) // 渲染:公共操作 const renderPublicActions = [ navigate(-1)}>返回 primary.submit()}>保存 ] useEffect(() => { Api_Module_Edit_Prepare(module).then((res) => { setTableData(formatTableData(res.form)) setTabList(formatTableTabs(res.form)) setTableActive(res.form[0].table_name) }) }, [module]) return ( {contextHolder} {tableData[tableActive]} ) } Component.displayName = "Edit"; }, [module])

阅读量:140

点赞量:0

问AI
这里的设计存在一定的问题 * "onFinish" 依赖了 "tableActive" * 而 "onFinish" 又是在 "setTableData(formatTableData(res.form))" 中被引用的 * 首次进入这个 "useEffect" 的时候,"tableActive" 肯定是初始值,当请求完成更新 "tableActive" 后,并不会触发 "setTableData(formatTableData(res.form))" 这条逻辑重新执行,所以导致产生了一个过期闭包,"onFinish" 始终引用的是初次的 "tableActive" * 因此这里 "tableActive" 其实也应该是这个 "useEffect" 的依赖项 但注意,加上之后,"tableActive" 变化,这个 "useEffect" 又会重新执行,会多请求一次,如果"tableActive"又存在变化的话会导致死循环,所以这块需要考虑下设计是否合理 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/bbafe0f967cc7f7c72742ebe577ed420.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/b39d9fcdf6cbfa57fd7fc3cc6ac25962.png)