我尝试将表单值发送到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)
})
}
}并且我的请求在数据库中写为空。 console.log(person)在控制台中显示一个正确的对象：
{name: "Anna", age: "14", status: "student"}
但是console.log(responce.data)仅显示
{_id: "5e888cb9ca6e5518a5bdf0c2", __v: 0}
我与邮递员核对了我的请求，这些请求可以正常工作。我不明白我的问题在哪里。为什么对象不写在数据库中？
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]]）
axios.post(...)调用的参数顺序错误。您有：
axios.post('someUrl', {
headers: {
'Content-Type': 'application/json',
},
body: { person }
})
校正顺序为：
axios.post('someUrl', {
body: { person },
headers: {
'Content-Type': 'application/json',
}
})
来自docs
axios.post（url [，data [，config]]）