Antd 没有重新渲染的问题

1、

export function CreateMaterialButton(props) {
    const revisionType = props.revisionType //SW8_PARTRevision 还是 SW8_ProductRevision
    const getTableData = props.getTableData
    const [basicPropertyFields, setBasicPropertyFields] = useState([]);
    const [loading, setLoading] = useState(false);
    const [twoLevelOptions, setTwoLevelOptions] = useState([]);
    const [testOptions, setTestOptions] = useState([]);
    console.log("CreateMaterialButton loading......");
    useEffect(() => {
        console.log("initUIData start...");
        initUIData(revisionType,setBasicPropertyFields,twoLevelOptions,setTwoLevelOptions)
    },[])
    return <>
        <ModalForm
            title={props.name}
            trigger={
                <Button type="primary">
                    {props.name}
                </Button>
            }
            width= {1100}
            autoFocusFirstInput
            modalProps={{
                onCancel: () => console.log('run'),
                bodyStyle: { height: 450, overflow: 'auto' }, // 设置 body 的高度为300，并添加滚动条
            }}
            onFinish={async (values) => {
                //await waitTime(2000);
                setLoading(true)
                try{
                    const result = await createOkClick(revisionType,values,getTableData)
                    return result;
                }catch(error){
                    console.log("error = ",error);
                    message.error(error.message)
                    return false
                }finally{
                    setLoading(false)
                }
            }}
            centered="true"
            submitter={{
                render: (props, defaultDoms) => {
                    console.log("测试");
                    const newButtonArr = []
                    newButtonArr.push(<Button
                        key="check"
                        onClick={() => {
                        }}
                      >
                        校验
                      </Button>)
                    newButtonArr.push(defaultDoms[1])
                    newButtonArr.push(defaultDoms[0])
                    return newButtonArr
                }
            }}
            loading={loading}
            >
            <IntervalDiv name="校验属性"/>
            <ProForm.Group>
                <ProFormText width="md" name="company" label="品牌" placeholder="请输入相关信息" />
                <ProFormText width="md" name="company" label="规格型号" placeholder="请输入相关信息" />
            </ProForm.Group>
            <IntervalDiv name="基础属性"/>
            <ProForm.Group>
                {basicPropertyFields}
            </ProForm.Group>
            <IntervalDiv name="分类属性"/>
            <ProForm.Group>
                <ProFormText width="md" name="contract" label="直径" placeholder="请输入相关信息" />
                <ProFormText width="md" name="contract" label="材质" placeholder="请输入相关信息" />
                <ProFormText width="md" name="contract" label="规格型号" placeholder="请输入相关信息" />
            </ProForm.Group>
            <IntervalDiv name="相关文件"/>
            <ProForm.Group>
                <ProFormSelect
                    //options={[{value: 'JT文件',label: 'JT文件'},{value: '认证文件',label: '认证文件'}]}
                    options={testOptions}
                    width="sm"
                    name="useMode"
                    label="文件类型"
                    showSearch
                />
                <ProFormUploadButton
                    extra="支持扩展名：.rar .zip .doc .docx .pdf .jpg ..."
                    label="附件"
                    name="file"
                    title="上传文件"
                />
            </ProForm.Group>
            <Button onClick={()=>{
                console.log("setTestOptions start......");
                setTestOptions[[{ label: 'New Option', value: 'new' }]]
                console.log("setTestOptions end......");
            }}>测试</Button>
        </ModalForm>
    </>
}

　

1、问题：执行完setTestOptions[[{ label: 'New Option', value: 'new' }]]后，

没有执行console.log("CreateMaterialButton loading......"); 重新渲染

 

2、解决办法（ChatGpt）

看起来你想要在 ProFormSelect 组件中重新初始化下拉选项。根据你的代码，你可以通过在点击按钮时更新 testOptions 状态来实现这一点。在你的代码中，测试按钮的点击事件已经尝试更新 testOptions 状态，但是有一点小问题。在更新状态时，应该使用 setTestOptions 方法，而不是 setTestOptions[[...]]。

下面是修改后的代码：

<Button onClick={()=>{
    console.log("setTestOptions start......");
    setTestOptions([{ label: 'New Option', value: 'new' }]); // 使用正确的语法更新下拉选项状态
    console.log("setTestOptions end......");
}}>测试</Button>