代码之家 › 专栏 › 技术社区 › MontyGoldy

react/redux:未按预期状态保存

axios redux reactjs javascript

MontyGoldy · 技术社区 · 6 年前

我正在开发一个评论应用程序。我使用json服务器来完成post请求。我的数据库是这样的

[{
    "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"
  }
]

这是我的添加操作

//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));
};

这是我的减速机

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”。

这是我在行动中得到的

1 回复 | 直到 6 年前

kkpoon 6 年前

参照 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" }
})
//...

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

2 年前

universe11 · 对伊默来说,这是正确的还是错误的?

2 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

2 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

2 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

2 年前

geyser · React Redux toolkit-输入字段的状态管理

2 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

2 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

2 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

2 年前