如何为redux-form创建编辑页面并填充数据？能否复用新增表单？

嘿，刚好对redux-form的这套流程很熟，我来一步步帮你解决这两个问题～

redux-form本身就提供了initialValues这个核心属性来处理表单初始化填充，结合你的代码，你可以这么做：

1. 先获取要编辑的文章数据 #

首先你需要拿到目标文章的数据——要么从路由参数（比如match.params.id）获取文章ID后调用API拉取，要么直接从Redux Store里读取已有的文章数据。

比如在你的表单组件里，用componentDidMount触发数据获取：

componentDidMount() {
  // 假设你有一个action用来获取单篇文章
  const { fetchSinglePost, match } = this.props;
  fetchSinglePost(match.params.postId);
}

2. 通过initialValues传递数据给表单 #

把拿到的文章数据通过initialValues传给你的redux-form组件就行，而且这个对象的键名必须和你的Field组件的name属性完全对应（比如你的Field name是title、body、category，文章对象里也要有这三个字段）。

你可以在mapStateToProps里把文章数据映射成initialValues：

const mapStateToProps = state => ({
  // 假设你的文章数据存在state.posts.currentPost里
  initialValues: state.posts.currentPost
});

// 用reduxForm高阶组件包装时，保持form名称一致
export default reduxForm({
  form: 'postForm'
})(connect(mapStateToProps, { fetchSinglePost })(PostForm));

这样当组件渲染时，redux-form会自动把initialValues里的值填充到对应的Field输入框里～

3. 处理异步加载的边界情况 #

因为文章数据是异步获取的，初始时可能是undefined，所以最好在render里加个判断，避免表单出现空值或者报错：

render() {
  const { handleSubmit, initialValues } = this.props;
  // 数据还没加载完时显示加载状态
  if (!initialValues) return <div>Loading post...</div>;

  return (
    <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
      {/* 你的Field组件们 */}
    </form>
  );
}

完全可以！ 根本不需要单独写编辑组件，只需要通过initialValues来区分「新增」和「编辑」两种模式：

1. 区分提交逻辑 #

在你的onSubmit方法里，判断是否存在initialValues（或者检查文章ID是否存在），来决定是执行「新增」还是「更新」操作：

onSubmit(values) {
  const { initialValues, createPost, updatePost } = this.props;
  
  if (initialValues?.id) {
    // 编辑模式：把原有ID和新提交的值一起传给更新action
    updatePost({ id: initialValues.id, ...values });
  } else {
    // 新增模式：直接传递新值给创建action
    createPost(values);
  }
}

2. 动态调整UI（可选） #

你还可以根据模式调整按钮文字或者其他UI元素，让用户更清楚当前操作：

<button type="submit" className="btn btn-primary">
  {initialValues ? 'Update Post' : 'Create Post'}
</button>

注意点 #

如果需要同时打开多个表单（比如一边新增一边编辑），那你需要动态设置form名称（比如用form: postForm-${initialValues?.id || 'new'}），但一般单页面的新增/编辑复用同一个form`名称就足够了。

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