使用React Hook Form提交表单后如何将数据同步到AlbumList组件展示

数据老陈

2026-10-12

问题根因

你代码中自定义的cover/name/artist/year四个state变量没有和表单输入做绑定，也没有任何更新逻辑，始终是空值，你构造新专辑对象时用了这些空值，自然传递给列表的都是无效数据
React Hook Form已经将所有表单输入的结果收集到onSubmit回调的第一个参数data中，不需要额外自己维护state
文件类型的输入值是File对象，不能直接作为img标签的src属性使用，需要转换为本地临时URL才能正常渲染

修复步骤

删除AddAlbum组件中无用的四个state定义：

// 直接删掉下面这四行代码即可
const [cover] = useState();
const [name] = useState('');
const [artist] = useState('');
const [year] = useState('');

修改onSubmit逻辑，从data中取表单值，处理文件字段：

const onSubmit = (data, e) => {
  console.log(data, e);
  // 处理封面文件，转成可渲染的临时URL
  const coverUrl = URL.createObjectURL(data.cover[0]);
  const newAlbum = {
    id: albums.length + 1,
    cover: coverUrl,
    name: data.name, // 对应你表单中名称输入框register的参数名
    artist: data.artist, // 对应你表单中艺术家输入框register的参数名
    year: data.year, // 对应你表单中年份输入框register的参数名
  };
  addAlbum(newAlbum);
  history.push('/');
};