Javascript 无法将对象添加到数组中

我是react hooks和redux的新手，我正在构建简单的CRUD员工应用程序，当我尝试添加员工时，它显示为null。这意味着它显示在数组中，但它是空的

这是我的密码

import React, {useState, useEffect} from 'react';
import {Form, Button} from 'react-bootstrap';
import {useHistory} from 'react-router-dom'
import {addEmployee} from "../../actions/employeeActions";
import FormContainer from "../layout/FormContainer";
import {useDispatch} from "react-redux";

const AddEmployee = () => {
    let history = useHistory()
    const dispatch = useDispatch()

    const [full_name, setFull_name] = useState('');
    const [email, setEmail] = useState('');
    const [phone_number, setPhone_number] = useState('');
    const [address, setAddress] = useState('');

    const onSubmit = (e) => {
        e.preventDefault()
        dispatch(addEmployee())
        history.push('/home')
    }

和减速器

case ADD_EMPLOYEE:
            return {
                ...state,
                employees: [action.payload, ...state.employees],
                loading: false
            }

和行动

export const addEmployee = () => async dispatch => {
    const config = {
        headers: {
            'Content-Type': 'application/json'
        }
    }
    const response = await axios.post('api/employees', config)

    dispatch({
        type: ADD_EMPLOYEE,
        payload: response.data
    })
}

请协助当您

分派（addEmployee（））

时，您甚至没有在

action.js

中将参数（如姓名、电子邮件、电话等）传递给

addEmployee

。这就是为什么返回

null

的原因

试试这个：

export const addEmployee = (name, email, phone, address) => async dispatch => {
    const config = {
        headers: {
            'Content-Type': 'application/json'
        },
        // post the params as data in your axios call
        data: JSON.stringify({ name, email, phone, address })
    }

    const response = await axios.post('api/employees', config)

    dispatch({
        type: ADD_EMPLOYEE,
        payload: response.data
    })
}

然后发送

dispatch(addEmployee(full_name, email, phone_number, address));

编辑：

由于状态在调度操作之前仍然出现

null

（在

onSubmit（）

中），这意味着状态在调度之前不会更新。尝试按以下方式更新您的代码：

<input value={full_name} onChange={(e) => setFull_name(e.target.value)} />

setFull\u name（e.target.value）}/>

当您

分派（addEmployee（））

时，您甚至没有将参数（例如姓名、电子邮件、电话等）传递到

action.js中的
addEmployee
。这就是为什么返回
null
的原因

试试这个：

export const addEmployee = (name, email, phone, address) => async dispatch => {
    const config = {
        headers: {
            'Content-Type': 'application/json'
        },
        // post the params as data in your axios call
        data: JSON.stringify({ name, email, phone, address })
    }

    const response = await axios.post('api/employees', config)

    dispatch({
        type: ADD_EMPLOYEE,
        payload: response.data
    })
}

然后发送

dispatch(addEmployee(full_name, email, phone_number, address));

编辑：

由于状态在调度操作之前仍然出现
null
（在
onSubmit（）
中），这意味着状态在调度之前不会更新。尝试按以下方式更新您的代码：

<input value={full_name} onChange={(e) => setFull_name(e.target.value)} />

setFull\u name（e.target.value）}/>
您是否尝试过使用调试器？除了检查还原程序是否在
combineReducer
中之外，对于
rootReducer
是的，所有的还原程序树看起来都很好，似乎找不到任何错误代码看起来很好。请在代码中的不同位置尝试
console.log（）
，以找出代码未按预期执行的实际位置。虽然
console.log（response.data）
，但我不确定应该在console.log（）中执行什么操作，并确保它一直发送到reducer，直到您尝试使用任何调试器为止？除了检查还原程序是否在
combineReducer
中之外，对于
rootReducer
是的，所有的还原程序树看起来都很好，似乎找不到任何错误代码看起来很好。在代码中的不同位置尝试
console.log（）
，以找出代码未按预期执行的实际位置。虽然
console.log（response.data）
，但我不确定应该在console.log（）中执行什么操作，并确保它一直发送到reducer。如果reducer也不起作用，它仍然显示为未定义（null）可以
console.log吗（全名、电子邮件、电话号码、地址）
在
onSubmit
函数中？如果结果仍然未定义/为空，请检查您的
onChange
函数的状态。onChange很好。console.log（全名、电子邮件、电话号码、地址）仍然出现空值。有人能帮我吗？你甚至没有改变状态，这就是为什么出现空值的原因。好吧，如果你想做一些测试，试试
const[full\u name，setFull\u name]=useState（'James Bond'））
和
console.log
再次出现。我打赌这次会显示
全名
，并且您当前遇到的问题与redux无关！查看此内容以了解有关如何更新状态的更多信息。如果状态也不起作用，它仍然会显示为未定义（null）您可以
console.log吗（全名、电子邮件、电话号码、地址）
在
onSubmit
函数中？如果结果仍然未定义/为空，请检查您的
onChange
函数的状态。onChange很好。console.log（全名、电子邮件、电话号码、地址）仍然出现空值。有人能帮我吗？你甚至没有改变状态，这就是为什么出现空值的原因。好吧，如果你想做一些测试，试试
const[full\u name，setFull\u name]=useState（'James Bond'））
和
控制台。再次记录
。我打赌这次会显示
全名，而您当前遇到的问题与redux无关！查看此内容以了解有关如何更新状态的更多信息