Question

我尝试将表单值发送到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)

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

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

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

但是console.log(responce.data)仅显示

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

我向邮递员检查了我的请求，这些请求可以正常工作。我不明白我的问题在哪里。为什么对象不写在DB中？

Answer 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]]）

POST请求为空

1 个答案: