Reactjs 使用redux发出.post请求

我试图允许用户通过一个表单输入，添加到API中保存的Smurf数组中。使用下面的代码，当我输入表单时，数据永远不会进入我的API。当我尝试将console.log数组作为我希望保存在用户输入时检索到的数据的对象--（newSmurf）时，它返回为空。有人知道怎么解决这个问题吗

方法：

export const addSmurf = (e, values) => dispatch => {
    e.preventDefault();
    dispatch({ type: ADD_SMURF })
    axios.post('http://localhost:3333/smurfs', values)
    .then(res => {
        console.log(res);
    })
};

初始状态和减速器：

const initialState = {
    smurfs: [],
    isFetching: false,
    error: '',
    newSmurf: []
}

const smurfReducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_SMURF_START:
            return {
                ...state,
                isFetching: true
            };
        case FETCH_SMURF_SUCCESS:
            return {
                ...state,
                isFetching: false,
                smurfs: action.payload
            };
        case ADD_SMURF:
            return {
                ...state,
                newSmurf: [{
                    ...state.newSmurf,
                    name: action.payload,
                    age: action.payload,
                    height: action.payload
                }]
            }
        default:
            return state;

组成部分：

const Smurf = props => {

    const [newSmurf, setNewSmurf] = useState({ 
        name: "", 
        age: "",
        height: "",
    })

    // const handleSubmit = event => {
    //     event.preventDefault()
    //     axios.post('http://localhost:3333/smurfs', newSmurf)
    //     .then(res => console.log(res))
    //     .catch(err => console.log(err))
    //     setNewSmurf({
    //         name: "",
    //         age: "",
    //         height: "", 
    //     })
    // }

    const handleChanges = event => setNewSmurf({
        ...newSmurf,
        [event.target.name]: event.target.value
    })
    console.log(newSmurf);

    return (
        <div>
            <h1>Smurfs</h1>
            {props.smurfs.map(smurf => (
                <div>
                    <p>{smurf.name}</p>
                    <p>{smurf.age}</p>
                    <p>{smurf.height}</p>
                    <br />
                </div>
            ))}
            <div>
                <form onSubmit={(handleChanges) => props.addSmurf(handleChanges)}>
                    <input type="text" name="name" placeholder="enter smurf name" onChange={handleChanges} />
                    <input type="text" name="age" placeholder="enter smurf age" onChange={handleChanges} />
                    <input type="text" name="height" placeholder="enter smurf height" onChange={handleChanges} />
                    <button type="submit">Submit!</button>
                </form>
                <button onClick={() => props.getSmurfs()}>get smurfs</button>
            </div>
        </div>

    )
}

const mapStateToProps = state => {
    return {
        smurfs: state.smurfs,
        isFetching: state.isFetching,
        newSmurf: state.newSmurf,
        error: state.error
    }
}

export default connect (mapStateToProps, {getSmurfs, addSmurf})(Smurf);

const Smurf=props=>{
const[newSmurf，setNewSmurf]=useState（{
姓名：“，
年龄：“，
高度：“，
})
//const handleSubmit=事件=>{
//event.preventDefault（）
//轴心柱http://localhost:3333/smurfs",newSmurf)
//.then（res=>console.log（res））
//.catch（err=>console.log（err））
//塞特纽斯穆夫({
//姓名：“，
//年龄：“，
//高度：“，
//     })
// }
const handleChanges=event=>setNewSmurf({
…纽斯穆夫，
[event.target.name]：event.target.value
})
console.log（newSmurf）；
返回(
蓝精灵
{props.smurfs.map（smurf=>(
{smurf.name}

{蓝精灵时代}

{蓝精灵高度}



))}
props.addSmurf（handleChanges）}>
提交
props.getSmurfs（）}>获取smurfs
)
}
常量mapStateToProps=状态=>{
返回{
蓝精灵：州。蓝精灵，
isFetching:state.isFetching，
newSmurf:state.newSmurf，
错误：state.error
}
}
导出默认连接（mapStateToProps，{getSmurfs，addSmurf}）（Smurf）；

调用

props.addSmurf（handleChanges）

时，可能会出现重复的情况。您只给它一个参数，但第二个参数是通过post请求持久化的

值。你为什么不给它第二个论点？@Nick我没有给它第二个论点仅仅是因为人为的错误。修好了，谢谢！