带有React和redux的Post方法

Question

bounty到期在7天内。该问题的答案有资格获得+ 100声望赏金。 The Dead Man想要引起更多关注来回答这个问题。

我有一个用于CRUD操作的简单应用程序，现在我可以删除，编辑和显示数据，但是我想将新项目添加到使用react和redux从API（JSON服务器假API）获取的用户列表中。

现在单击添加用户并保存数据时，仅发送ID，但不发送其他数据。

这里是现场演示：Redux live demo with source code sandbox。

这是我的表单，AddUserForm.js

import React, { useState } from 'react'
import {useDispatch} from 'react-redux'
import { addNewUser  } from '../redux/acitons/users/Users';

function AddUserForm({users}) {
    const dispatch = useDispatch();
    const [newUserName, setNewUserName] = useState('');

   const handleSubmit = (e) =>{
    e.preventDefault();

    const usersList = users;
    const newUserId = usersList[usersList.length - 1].id + 1;

    console.log("your name", newUserName);
    console.log("your id", newUserId)

    dispatch(addNewUser({
      ...users,
      id: newUserId,
      name: newUserName,
    }));

   }

  const handleCancel = () => {};
  return (
    <tr>
      <td>{newUserName.id}</td>
      <td>
        <input
          value={newUserName}
          name="name"
          onChange={e => setNewUserName(e.target.value)}
        />
      </td>
      <td>
        <button type="button" className="btn outline" onClick={handleCancel}>
          <i className="material-icons">Cancel</i>
        </button>
        <button
          type="button"
          className="btn btn-success btn-link"
          onClick={handleSubmit}
        >
          <i className="material-icons">save</i>
        </button>
      </td>
    </tr>
  );
}

export default AddUserForm

并且我通过单击按钮在父组件中这样称呼。

{adding && <>
            <AddUserForm addNewUser={addNewUser} users={userData.users} />
   </>}

这里是父组件中的按钮。

<button
          type="button"
          className="btn btn-success btn-link btn-add"
          onClick={() => setAdding(true)}
        >
    <i className="material-icons">Add user</i>
</button>

我的代码有什么问题？任何帮助或建议将不胜感激

Answer 1

在调试工具的屏幕快照中，您正在向我们显示响应正文，而不是请求正文。

[users是一个数组，为什么这样做

dispatch(addNewUser({
  ...users,
  id: newUserId,
  name: newUserName,
}));

对此感兴趣吗？

dispatch(addNewUser({
  id: newUserId,
  name: newUserName,
}));

我认为问题的根本原因在于src/redux/acitons/users/Users

export const addNewUser = data => {

  console.log("adding mother a new user", data);

  return dispatch => {
    axios.post("http://localhost:3000/users")

我可以在data中看到console.log，而不是在POST中。

希望这会有所帮助。