React+Redux表单提交问题：表单数据显示undefined无法提交

我帮你梳理下代码里的几个关键问题，一步步来修复：

你遇到的表单数据全是undefined的核心原因是PostForm组件丢失了本地状态管理，再加上组件回调传递、Redux逻辑的几处不匹配，导致输入数据根本没被正确捕获和传递。

1. 恢复PostForm的本地表单状态 #

你把PostForm里的state和onChange方法注释掉了，这就导致输入框绑定的this.props.title/body根本不存在，自然是undefined。我们需要让组件自己管理输入状态：

修改PostForm.js：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class PostForm extends Component {
  // 恢复表单状态，存储输入值
  state = {
    title: '',
    body: '',
  };

  static propTypes = {
    sendPostData: PropTypes.func.isRequired,
  };

  // 恢复输入变更处理方法
  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  onSubmit(e) {
    e.preventDefault();
    // 从本地state获取表单数据
    const { title, body } = this.state;
    console.log('捕获的表单数据：', title, body);
    // 把数据传给Redux action
    this.props.sendPostData({ title, body });
    // 可选：提交后清空表单
    this.setState({ title: '', body: '' });
  }

  render() {
    const { title, body } = this.state; // 从本地state拿值，不是props
    return (
      <div>
        <h1> Add Post </h1>
        <form onSubmit={e => this.onSubmit(e)}>
          <div>
            <label>Title: </label>
            <input type='text' name='title' value={title} onChange={this.onChange} />
          </div>
          <div>
            <label>Body: </label>
            <textarea name='body' value={body} onChange={this.onChange} />
          </div>
          <button type='submit'>Submit</button>
        </form>
      </div>
    );
  }
}

export default PostForm;

2. 修正Post组件的无效回调传递 #

你在Post组件里注释掉了onSubmit方法，还给PostForm传了无效的addPost={this.onSubmit}，这部分完全不需要——提交逻辑已经交给Redux处理了，直接渲染PostForm即可：

修改Post.js的render方法：

render() {
  console.log('props', this.props);
  const { posts } = this.props;
  return (
    <div>
      <PostForm />
      <br />
      {posts.length > 0 && (
        <div>
          {posts.map(post => (
            <div key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

3. 对齐Redux Thunk的参数传递 #

你的sendPost函数定义了三个参数，但PostForm传递的是一个对象，而且jsonplaceholder会自动生成id，不需要手动传入。调整postReducers.js里的sendPost：

export const sendPost = (post) => {
  return (dispatch, getState) => {
    Axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: post.title,
      body: post.body,
      // 无需手动传id，后端会自动生成
    }).then(res => {
      dispatch(submitPost(res.data));
    });
  };
};

4. 修复Reducer的状态结构一致性 #

你的postReducer初始状态是数组，但提交后返回了对象，导致后续posts.map报错。保持状态为数组，新增文章直接追加到数组末尾：

export default function reducer(state = [], action = {}) {
  switch (action.type) {
    case FETCH_POSTS:
      return action.payload;
    case SUBMIT_POST: {
      // 保持状态为数组，添加新文章
      return [...state, action.payload];
    }
    default:
      return state;
  }
}

5. 修正Store的初始状态 #

store里的初始posts是对象，和reducer的数组初始状态不一致，改成空数组：

const initialState = {
  posts: [],
};

完成这些修改后，你就能正常捕获表单输入的数据，提交后Redux状态会更新，页面也能显示新添加的文章了。

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