javascript - Redux 状态正在更新，但字段和值没有相应更新。调度 EDIT.USER.VALUE 时有一个带有索引的额外未定义字段

Question

我想在字段中添加多个选项时更新状态，所以我发送了一个 EDIT.USER.VALUE，它将继续跟踪更改。

但是当我将选项添加到 应用程序 UI 和 redux 存储的字段中时，它出现了一个未定义的字段，而不是更新角色：[] 和权限：[]的值

当我添加一个选项时，它会在我的 redux 商店中出现 undefine:0

当我删除一个选项时，它会在我的 redux 商店中显示为 undefine:0 并带有删除线

我想要的是在角色中显示值（选定的选项）：[] & 权限：[] 而不是 undefine:0

我使用的堆栈是用于多个值的 React、Redux、Material-UI ，我将在下面提供我的代码库

Redux 商店：

import { EDIT_USER_VALUE } from "../actions/user";

const initialState = {
    data: {},
    filter: "",
    user: {},
    userDetail: {
        id: "",
        name: "",
        fullname: "",
        email: "",
        role: [],
        permission: []
    },
    selectedUser: {},
    filters: {
        username: "",
        name: "",
    },
    create: {},
    loading: false,
    error: null,
    notify: false,
    noticeType: ""
};

export const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case EDIT_USER_VALUE:
            return {
                ...state,
                userDetail: {
                    ...state.userDetail,
                    [action.key]: action.value
                },
            };
            default:
                return state
}};

反应

import {
    Box,
    Button,
    Typography
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { OneField } from "./UserSingleField";
import { SUBMIT_USER_PROFILE, EDIT_USER_VALUE } from "../../actions/user";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";

const useStyles = makeStyles((theme) => ({
    headerContent: {
        display: 'flex',
        flex: 1,
        padding: "20px",
        marginBottom:"30px"
    },
    header: {
        display: 'flex',
        flex: 1,
        justifyContent: "flex-start",
    },
    saveButton: {
        backgroundColor: "#719df4",
        display: "flex",
        fontSize: "14px",
        padding: "0",
    },
    edit: {
        display: "flex",
        flex: 1,
        marginBottom: "20px"
    },
    label: {
        alignItems: "center",
        display:"flex",
        flex: 1,
        fontSize: "16px",
        marginLeft: "20px",
    },
    fields: {
        display: "flex",
        flex: 2,
        marginRight: "20px"
    },
}));

const infoArr = [
    {
        label: "Username:",
        field: "name"
    },
    {
        label: "Name:",
        field: "fullname"
    },
    {
        label: "Email:",
        field: "email"
    }
 ]

const userRole = [
    { role: "VA" },
    { role: "VA 2" }
  ];
  
const userPermission = [
    { permission: "Channel 100001" }
  ];

export const UserEdit = ({ field }) => {
    const dispatch = useDispatch();
    const styles = useStyles();
    const user = useSelector((state) => state.user);
    const handleEditSave = (e) => {
        dispatch({ type: SUBMIT_USER_PROFILE });
    };  

    const handleFieldChange = (field) => (e) => {
        const value = e.target.value;
        dispatch({ type: EDIT_USER_VALUE, key: field, value })
    }

    return (
    <>
        <Box>
            <Box className={styles.headerContent}>
                <Typography className={styles.header} variant="h4">User Profile</Typography>
                    <Button
                        color="primary"
                        variant="contained"
                        className={styles.saveButton}
                        onClick={handleEditSave}>
                        SAVE
                    </Button>
            </Box>

            {/* Username, Name, Email */}
            <Box >
            { infoArr.map(info => {
                return (
                <>
                    <Box className={styles.edit}>
                        <Box className={styles.label}>{info.label}</Box>
                        <OneField field={info.field} />
                    </Box>
                </> )})
            }
            </Box>
            
            <Box className={styles.edit}>
                <Box className={styles.label}>Roles: </Box>
                    <div className={styles.fields}>
                        <Autocomplete
                            multiple
                            fullWidth
                            options={userRole}
                            value={user.role}
                            onChange={handleFieldChange(field)}
                            getOptionLabel={(option) => option.role}
                            renderInput={(params) => (
                                <TextField
                                    {...params}
                                />
                            )}
                        />
                    </div>          
            </Box>

            <Box className={styles.edit}>
                <Box className={styles.label}>Permissions: </Box>
                    <div className={styles.fields}>
                        <Autocomplete
                            multiple
                            fullWidth
                            options={userPermission}
                            getOptionLabel={(option) => option.permission}
                            renderInput={(params) => (
                                <TextField
                                    {...params}
                                />
                            )}
                        />
                    </div>  
            </Box>
        </Box>
    </>)
}

共鸣/user.js

const submitUserProfile = createVibes({
    type: SUBMIT_USER_PROFILE,
    async process({ getState, axios }, dispatch, done ) {
        const { userDetail } = getState().user;
    
        const userInfo = { 
            name: userDetail.name, 
            fullname: userDetail.fullname, 
            email: userDetail.email,
            system: 2,
            role: userDetail.role,
            permission: userDetail.permission
        }

        try {
            const userProfile = await axios.request({
                method: "post",
                url: process.env.REACT_APP_AUTH_DOMAIN + "/v1/api",
                data: {
                    query: `mutation addUser($form:UserInput){ addUser(input: $form){ id name } }`,
                    variables: {
                        form: userInfo
                    },
                },
            });

            if (userProfile && userProfile.status === 200) {
                dispatch({ type: SUBMIT_USER_PROFILE_SUCCESS,  
                    payload: {
                        notice: "User created successfully",
                    },
                });
                dispatch({ type: CLEAR_EDIT_SELECT_USER });
            }

        } catch (error) {
            if (error?.response) {
                dispatch({
                    type: SUBMIT_USER_PROFILE_FAIL,
                    payload: error.response?.data.errors[0]?.message,
                });
            } else {
                dispatch({
                    type: SUBMIT_USER_PROFILE_FAIL,
                    payload: typeof error === "string" ? error : error?.message,
                });
            }
        }
        done();
    },
});

最后，英语不是我的母语，所以对我糟糕的描述感到抱歉。

标签： javascriptreactjsreduxmaterial-uionchange