React文件上传成功后自动刷新父组件的解决方案咨询

问题核心 #

你当前用key递增强制父组件重新挂载的方式，只能清空表单状态，但下拉框的选项数据是从API获取的——如果父组件挂载时只请求了一次API（比如useEffect依赖为空数组），重新挂载后不会自动触发新的API请求，导致选项还是旧数据，必须手动刷新页面。

正确实现思路 #

不要依赖key强制刷新，而是：

1. 父组件维护下拉框选项的状态，以及表单字段的状态
2. 子组件上传成功后，通知父组件同时清空表单字段 + 重新请求下拉框API

修改后的代码示例 #

父组件 Component A

import { useState, useEffect, useCallback } from 'react';

const ComponentA = () => {
  // 维护下拉框选项的状态
  const [dropdownOptions, setDropdownOptions] = useState([]);
  // 维护表单字段状态（假设是一个对象存储5个下拉框的值）
  const [formFields, setFormFields] = useState({
    field1: '',
    field2: '',
    field3: '',
    field4: '',
    field5: ''
  });

  // 封装获取下拉框选项的API请求函数
  const fetchDropdownOptions = useCallback(async () => {
    try {
      const res = await API.getDropdownOptions(); // 替换成你的实际API
      setDropdownOptions(res.data);
    } catch (error) {
      // 处理请求错误
    }
  }, []);

  // 组件挂载时初始化下拉框选项
  useEffect(() => {
    fetchDropdownOptions();
  }, [fetchDropdownOptions]);

  // 清空表单并重新获取下拉框选项
  const clearDataForm = useCallback(() => {
    // 清空表单字段
    setFormFields({
      field1: '',
      field2: '',
      field3: '',
      field4: '',
      field5: ''
    });
    // 重新请求下拉框API，更新选项
    fetchDropdownOptions();
  }, [fetchDropdownOptions]);

  return (
    <Form>
      <FormData.Group>
        {/* 示例下拉框：使用最新的dropdownOptions和formFields */}
        <Form.Select
          name="field1"
          value={formFields.field1}
          onChange={(e) => setFormFields(prev => ({...prev, field1: e.target.value}))}
        >
          {dropdownOptions.map(opt => (
            <option key={opt.id} value={opt.value}>{opt.label}</option>
          ))}
        </Form.Select>
        {/* 其他4个下拉框同理 */}
      </FormData.Group>

      {/* 传递clearDataForm给子组件 */}
      <FileUpload uploadedData={uplodDetails} clearDataForm={clearDataForm}/>
    </Form>
  );
};

子组件 Component B

const FileUpload = ({ uploadedData, clearDataForm }) => {
  const handleFileUpload = async (uploadedFile) => {
    const formData = new FormData();
    formData.append("file", uploadedFile);

    try {
      const res = await API.uploadFiled(Add_Uploaded_File_Fields, id, formData);
      // 修正：原代码中response应为res
      if (res?.status === 200) {
        clearDataForm();
        toast.success("Uploaded");
      }
    } catch (error) {
      // Handle error
    }
  };

  // 其他上传UI逻辑
  return (
    {/* 上传区域和按钮 */}
  );
};

关键说明 #

• 移除了key强制刷新的方案，改用主动更新状态的标准React做法，避免不必要的组件重新挂载
• fetchDropdownOptions用useCallback包裹，确保在clearDataForm中调用时不会因函数引用变化导致重复渲染
• 下拉框选项直接绑定dropdownOptions状态，API请求完成后会自动更新选项列表
• 表单字段状态集中管理，清空时直接重置为初始值，下拉框会自动同步清空

内容的提问来源于stack exchange，提问作者Still_Learning