NextJS 13调用setFileList后fileList始终为null，组件不重渲染求助

你的问题核心是React Hook Form（RHF）的表单状态管理逻辑，和你手动维护的fileList useState产生了冲突，导致组件渲染时无法获取到更新后的fileList值，而useEffect能触发是因为它在state更新后的生命周期阶段执行，能捕获到最新值。

为什么会出现这个问题？ #

1. File类型输入是不可控组件：浏览器不允许通过value属性手动设置文件内容，RHF在处理这类输入时会有特殊的状态管理逻辑。
2. 同时使用原生onChange+useState和RHF：RHF会接管表单输入的状态，当你手动调用setFileList时，RHF的重渲染机制可能会覆盖或干扰你的本地state同步，导致渲染上下文里的fileList还是旧值。

正确的解决方式 #

推荐直接通过RHF的API来处理文件输入，避免手动维护state和RHF的状态冲突，以下是两种可行方案：

方案1：用RHF的watch监听文件变化（推荐）

import { useForm } from 'react-hook-form';
import { useEffect } from 'react';

type FormValues = {
  'file-upload': FileList | null;
};

export default function FileUploadForm() {
  const { register, watch, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      'file-upload': null,
    },
  });

  // 用RHF的watch替代useState，实时获取文件列表
  const fileList = watch('file-upload');

  useEffect(() => {
    console.log('fileList updated:', fileList);
  }, [fileList]);

  const onSubmit = (data: FormValues) => {
    console.log('Submitted files:', data['file-upload']);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        id='file-upload'
        name='file-upload'
        type='file'
        multiple
        accept='application/pdf, image/png, image/jpg, image/jpeg'
        className='sr-only'
        {...register('file-upload')}
      />

      {/* 渲染文件预览 */}
      {fileList && fileList.length > 0 && (
        <div className='file-previews'>
          {Array.from(fileList).map((file, index) => (
            <div key={index} className='file-item'>
              {file.type.startsWith('image/') ? (
                <img src={URL.createObjectURL(file)} alt={file.name} width={120} />
              ) : (
                <span>{file.name}</span>
              )}
            </div>
          ))}
        </div>
      )}

      <button type='submit'>提交</button>
    </form>
  );
}

方案2：用Controller手动同步RHF状态和本地state

如果你必须保留自己的fileList useState，可以用RHF的Controller组件包裹输入，确保两者状态同步：

import { useForm, Controller } from 'react-hook-form';
import { useState, useEffect } from 'react';

type FormValues = {
  'file-upload': FileList | null;
};

export default function FileUploadForm() {
  const { control, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      'file-upload': null,
    },
  });

  const [fileList, setFileList] = useState<FileList | null>(null);

  useEffect(() => {
    console.log('useEffect fileList:', fileList);
  }, [fileList]);

  const onSubmit = (data: FormValues) => {
    console.log('Submitted files:', data['file-upload']);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name='file-upload'
        control={control}
        render={({ field: { onChange } }) => (
          <input
            id='file-upload'
            name='file-upload'
            type='file'
            multiple
            accept='application/pdf, image/png, image/jpg, image/jpeg'
            className='sr-only'
            onChange={(e) => {
              const files = e.target.files;
              // 同步更新RHF状态和本地state
              onChange(files);
              setFileList(files);
            }}
            // 不可控组件必须设置value为undefined，否则浏览器会报错
            value={undefined}
          />
        )}
      />

      {/* 渲染预览 */}
      {fileList && fileList.length > 0 && (
        <div className='file-previews'>
          {Array.from(fileList).map((file, index) => (
            <div key={index} className='file-item'>
              {file.type.startsWith('image/') ? (
                <img src={URL.createObjectURL(file)} alt={file.name} width={120} />
              ) : (
                <span>{file.name}</span>
              )}
            </div>
          ))}
        </div>
      )}

      <button type='submit'>提交</button>
    </form>
  );
}

关键注意点 #

• 永远不要给file输入设置value属性（除了undefined），否则会触发浏览器的安全限制，导致输入无法正常工作。
• 用RHF的API管理表单状态时，尽量避免同时维护独立的useState，减少状态同步冲突。

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