React-Redux：在数据库中插入数据

Question

我正在学习使用 react-redux，如果我弄糊涂了，很抱歉！

我正在尝试创建一个表单并将数据插入到数据库中。

然后我创建了 2 页，一个用于表单，另一个用于表单。

申请表

handleChange = (e) => {
    let meeting = this.state.meeting;
    meeting[e.target.name] = e.target.value;
    this.setState({ meeting });
  };

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.meeting);
    this.props.addMeeting(this.state)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>

        <div>
          <label>Motivation:</label>
          <input
            type="text"
            name="motivation"
            onChange={(event) => this.handleChange(event)}
          />
        </div>
        <div>
          <label>Date:</label>
          <input
            type="date"
            name="date"
            onChange={(event) => this.handleChange(event)}
          />
        </div>

会议请求.js

import RequestForm from './RequestForm';
import { connect } from 'react-redux';
import {addMeeting} from '../Redux/actions';


class MeetingRequest extends Component {

  render() {
    const addMeeting = this.props
    return (
      <div>
        <h2>Request Meeting</h2>
        <RequestForm 
          addMeeting={addMeeting}
        />
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    addMeeting: (meeting) => dispatch(addMeeting(meeting)),
  };
}

export default connect(null, mapDispatchToProps)(MeetingRequest);

编辑。 感谢您的评论，第一个错误已解决，现在我有一个 500 问题。 会不会是 Actions.js 的问题？

而且在您看来我的做法是正确的？

谢谢

Answer 1

改变：

-const addMeeting = this.props
+const { addMeeting } = this.props

在MeetingRequest.js中

---

关于 API 上的 500 错误，可能是因为您在设置multipart/form-data时发送 JSON 。 使用开发工具中的网络选项卡进行检查。 如果您的后端需要multipart/form-data ，您必须将state.meeting object 转换为FormData