POST 请求为空答案

【问题标题】：POST request is emptyPOST 请求为空
【发布时间】：2020-07-16 15:19:37
【问题描述】：

我尝试将表单值发送到 DB（使用 redux-thunk、express 和 MongoDB）。我的组件看起来像

const AddPerson = (props) => {
  const [person, setPerson] = useState({
    name: '',
    age: '',
    status: ''

  })

  const handleChange = (event) => {
    setPerson({
      ...person,
      [event.target.name]: event.target.value
    })
  }

  const handleSubmit = (event) => {
    props.putCustomersData({ person })
    // eslint-disable-next-line no-console
    console.log(person)
    event.preventDefault()
  }
  return (
    <div>
      <Head title="This is new person" />
      <form onSubmit={
        handleSubmit
        }
      >
        <div>
          <div>name</div>
          <input
            name="name"
            type="text"
            value={person.name}
            onChange={handleChange}
          />
          <div>age</div>
          <input
            type="text"
            name="age"
            value={person.age}
            onChange={handleChange}
          />
          <div>status</div>
          <input
            name="status"
            type="text"
            value={person.status}
            onChange={handleChange}
          />
          <div>
            <button type="submit">Ok</button>
          </div>
        </div>
      </form>
    </div>
  );
}


AddPerson.propTypes = {}

AddPerson.defaultProps = {
  person: { }
}

const mapStateToProps = state => ({
  persons: state.persons.data
})

const mapDispatchToProps = dispatch => bindActionCreators({ putCustomersData }, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(AddPerson)

和还原

const initialState = {
  data: []
}


export default (state = initialState, action) => {
  switch (action.type) {
    case POST_CUSTOMER:
      return {
        ...state,
        data: action.data
      }
    default:
      return state
  }
}

export function putCustomersData(person) {
  return (dispatch) => {
    axios.post('someUrl', {
      headers: {
        'Content-Type': 'application/json',
      },
      body: { person }
    })
      .then((responce) => {
        dispatch({ 
        type: POST_CUSTOMER, 
        data: responce.data 
        })
        // eslint-disable-next-line no-console
        console.log('ok', responce.data)
      })
      .catch((error) => {
        dispatch({ type: POST_CUSTOMER_ERROR, error })
        // eslint-disable-next-line no-console
        console.log('err', error)
      })
  }
}

我的请求在 DB 中写为空。 console.log(person) 在控制台中显示正确的对象：

 {name: "Anna", age: "14", status: "student"}

但console.log(responce.data) 只显示

  {_id: "5e888cb9ca6e5518a5bdf0c2", __v: 0}

我与 Postman 核对我的请求，他们工作。我不明白我的问题出在哪里。为什么对象不写入数据库？

【问题讨论】：

标签： javascript forms post axios redux-thunk

【解决方案1】：

axios.post(...) 调用的参数顺序错误。你有：

  axios.post('someUrl', {
      headers: {
        'Content-Type': 'application/json',
      },
      body: { person }
    })

正确的顺序是：

axios.post('someUrl', {
  { person },
  headers: {
    'Content-Type': 'application/json',
  }  
})

来自docs

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

【讨论】：