javascript - react /减少 : Not saving in state as intended

Question

我正在构建一个评论应用程序。我正在使用 json-server 进行发布请求。我的数据库看起来像这样

[{
    "id": 5,
    "name": "Tom Cruise",
    "image": "http://placeholder.pics/svg/300x200/000000",
    "title": "Hiring Manager",
    "employeeId": "22222222",
    "funFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "dateOfJoining": "04/12/2013"
  },
  {
    "id": 6,
    "name": "Julius Caesar",
    "image": "http://placeholder.pics/svg/300x200/fdfdfd",
    "title": "Sales Executive",
    "employeeId": "33333333",
    "funFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "dateOfJoining": "04/12/2016"
  }
]

这是我的添加 Action

//Add Employee
export const addEmployee = employeeData => dispatch => {
  axios
    .post("http://localhost:3004/employees", {
      employeeData,
      headers: { "Content-Type": "application/json" }
    })
    .then(response =>
      dispatch({
        type: ADD_EMPLOYEE,
        payload: response.data.employeeData
      })
    )
    .catch(err => console.log(err));
};

这是我的 reducer

case ADD_EMPLOYEE:
  return {
    ...state,
    employees: [action.payload, ...state.employees],
    loading: false
  };

一切正常。问题是它在数据库中的存储方式是这样的

{
  "employeeData": {
    "name": "Manpreet Sandhu",
    "title": "bootstrap 4",
    "funFact": "cccZCZCZ",
    "image": "CZCZCZC",
    "employeeId": "ZCZCZC",
    "dateOfJoining": "C"
  },
  "headers": {
    "Content-Type": "application/json"
  },
  "id": 7
}

我想删除在每个条目之前添加的“employeeData”。

这是我在行动中得到的

Answer 1

引用axios document ,

• axios.post(url[, data[, config]])

在你的行动中，

//...
axios
    .post("http://localhost:3004/employees", {
      employeeData,
      headers: { "Content-Type": "application/json" }
    })
//...

您已将 headers: { "Content-Type": "application/json"} 放入 data 参数中

我猜，你会做的，应该是这样的

//...
axios
  .post("http://localhost:3004/employees",
    employeeData, //data
    { headers: { "Content-Type": "application/json" } } //config
  )

// or
axios({
  method: 'post',
  url: 'http://localhost:3004/employees',
  data: employeeData,
  headers: { "Content-Type": "application/json" }
})
//...