POST request is empty

I try to send a form values to DB (use redux-thunk, express, and MongoDB). My component looks like

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)

and redux

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

And my request writes as empty in DB. console.log(person) show a right object in console:

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

But console.log(responce.data) shows only

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

I check my requests with Postman and they work. I don`t understand where my problem is. Why object does not write in DB?

Solution

The parameters of your axios.post(...) call are in the wrong order. You have:

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

The correct order is:

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

From the docs

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