Redux POST 未发布到数据库

Question

我在使用 redux 进行 POST 调用时遇到了一些问题。我正在学习教程，但我不确定我做错了什么。

这是我的 AddProject 组件，它将接受用户对项目对象的输入 post 到数据库：

import React, { useState } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { createProject } from "../../actions/projectActions";

const AddProject = (props) => {
  const [projectName, setProjectName] = useState("");
  const [projectIdentifier, setProjectIdentifier] = useState("");
  const [description, setDescription] = useState("");
  const [startDate, setStartDate] = useState(Date);
  const [endDate, setEndDate] = useState(Date);

  const onSubmit = (e) => {
    e.preventDefault();
    const newProject = {
      projectName: projectName,
      projectIdentifier: projectIdentifier,
      description: description,
      startDate: startDate,
      endDate: endDate,
      errors: {},
    };

   // Here is the call to the createProject action...
    createProject(newProject, props.history);

  };

  return (
    <div className="register">
      <div className="container">
        <div className="row">
          <div className="col-md-8 m-auto">
            <h5 className="display-4 text-center">Create Project form</h5>
            <hr />
            <form onSubmit={onSubmit}>
              <div className="form-group">
                <input
                  type="text"
                  className="form-control form-control-lg "
                  placeholder="Project Name"
                  name="projectName"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                />
              </div>
              <div className="form-group">
                <input
                  type="text"
                  className="form-control form-control-lg"
                  placeholder="Unique Project ID"
                  name="projectIdentifier"
                  value={projectIdentifier}
                  onChange={(e) => setProjectIdentifier(e.target.value)}
                />
              </div>

              <div className="form-group">
                <textarea
                  className="form-control form-control-lg"
                  placeholder="Project Description"
                  name="description"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                ></textarea>
              </div>
              <h6>Start Date</h6>
              <div className="form-group">
                <input
                  type="date"
                  className="form-control form-control-lg"
                  name="start_date"
                  value={startDate}
                  onChange={(e) => setStartDate(e.target.value)}
                />
              </div>
              <h6>Estimated End Date</h6>
              <div className="form-group">
                <input
                  type="date"
                  className="form-control form-control-lg"
                  name="end_date"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                />
              </div>

              <input type="submit" className="btn btn-primary btn-block mt-4" />
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

AddProject.propTypes = {
  createProject: PropTypes.func.isRequired,
};

export default connect(null, { createProject })(AddProject);

这是 ProjectActions.js 中的 createProject 操作。现在的想法是简单地 post 将新项目添加到数据库并使用 history.push("/dashboard"):

刷新页面

import axios from "axios";
import { GET_ERRORS } from "./types";

export const createProject = (project, history) => async (dispatch) => {
  try {
   const res = await axios.post("http://localhost:8080/api/project", project);
    history.push("/dashboard");
  } catch (err) {
    dispatch({
      type: GET_ERRORS,
      payload: err.response.data,
    });
  }
};

即使我发送了一个有效的请求，我也没有看到在数据库中创建了一个新项目。是的，服务器是运行。我可以POST/GET/etc。与 Postman 通话。

有人看到我做错了什么了吗？

依赖项：

    "axios": "^0.25.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "5.0.0",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^2.1.4"

Answer 1

您需要dispatch您的行动：

以不同的方式命名以防止混淆：

AddProject.propTypes = {
  onCreateProject: PropTypes.func.isRequired,
};
export default connect(null, dispatch => ({
 onCreateProject: (props, history) => dispatch(createProject(props, history))
}))(AddProject);

然后在您的组件中调用它时，您需要将其称为：

props.onCreateProject(newProject, props.history);

Redux POST 未发布到数据库

Redux POST Not Posting to DB

javascript

reactjs

redux

react-redux