Javascript 使用react redux编辑表值

我正在学习React-Redux，我陷入了学习的一部分，我试图使用已经存在的表单编辑表中的用户值，从而获取行的值，并传递到表单，还将用户id保存在变量或某种类型中以更新用户，我不知道如何继续这部分

我的操作：src/actions/user.js

我的智能组件CreateUser:src/containers/CreateUser.js

我的虚拟组件NewUser:src/components/NewUser.js

我曾想过但无法复制的解决方案

我需要获取值表项的id值，该值表项作为UserList中的键，传递给user组件按钮的onClick参数，并在我在某些表项中单击edit时将id值传递给NewUser中的表单，以便能够在NewUser中使用OneEdit编辑表项

---

在解决方案管理和开发15中受阻

我用当前用户创建了一个const initialState，但我的userReducer状态只显示用户

src/recurders/userReducer.js 从“../constants/ActionTypes”导入{添加用户、删除用户、更新用户、更新当前用户、获取用户}

const initialState = {
    users: [],
    currentUser: {},
}

export default function userReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_USER:
            return [...state, action.payload];
        case DELETE_USER:
            return state.filter(user => user._id !== action.payload.id);
        case UPDATE_USER:
            return updateObject(state, action)
        case UPDATE_CURRENT_USER:
            return [...state, action.currentUser];
        case FETCH_USER:
            return action.users;
        default: 
            return state;
    }
}

function updateObject(array, action) {

    return array.map((item, index) => {
        if (item._id !== action.payload._id) {
            return item
        }

        return {
            ...item,
            ...action.payload
        }
    })
}

出口减速器 src/reducers/index.js

用户操作：src/actions/user.js

//Ommited
export const updateCurrentUserSuccess = (currentUser) => {
    return {
        type: UPDATE_CURRENT_USER,
        currentUser
    }
}

export const updateCurrentUser = (id) => {
    return (dispatch) => {
        return axios.get(`${apiUrl}/users/${id}`)
            .then(response => {
                dispatch(updateCurrentUserSuccess(response.data.data))
            })
            .catch(error => {
                throw (error);
            });
    };
};
//Ommited

我将我的用户列表连接到CreateUser

src/components/containers/UserList

从“React”导入React；
从'react redux'导入{connect}；
从“../components/User”导入用户；
从“../actions/user”导入{deleteUser，updateCurrentUser}；
从“../components/NewUser”导入NewUser；
函数UserList（{users，onDelete，onEditUser}）{
如果（！users.length）{
返回(
没有用户
)
}
返回(
诺姆
CPF/CNPJ
{users.map（user=>{
返回(
);
})}
);
}
常量mapStateToProps=状态=>{
返回{
用户：state.users
};
};
const mapDispatchToProps=调度=>{
返回{
onDelete:id=>{
调度（删除用户（id））；
},
onEditUser:（id）=>{
分派（更新当前用户（id））
}
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（UserList，NewUser）；

---

当我在编辑中单击并尝试查看NewUser.js中的console.log（Store.getState）时，只会返回我所有的用户，我没有currentUser。

您可以创建如下userReducer状态：

const initialState = {
  users: [],
  currentUser :{},
}

export default function userReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_USER:
            return [...state, action.payload];
        case DELETE_USER:
            return state.filter(user => user._id !== action.payload.id);
        case UPDATE_USER:
            return [...state, action.payload];
        case FETCH_USER:
            return action.users;
        default:
            return state;
    }
}

之后，让我告诉您几个简单的步骤：

单击编辑按钮，传递用户ID，并与该操作更新相对应

userReducer

中的

currentUser

使

新用户

组件连接到组件，并从存储中获取

当前用户

，并设置为输入字段

成功编辑后，将

当前用户

更新为空，并更新

用户

列表

---

我希望你明白我的意思。如果您在某个地方卡住了，请告诉我。

您好，谢谢您的回复，我被卡住了，您知道如何在userReducer中更新当前用户状态吗？我这样做了，但没有起作用：const initialState={users:[]，currentUser:{}，}导出默认函数userReducer（state=initialState，action）{switch（action.type）{//Ommitedz case UPDATE_CURRENT_USER:return[…state，action.currentUser]；//Ommited}}当我这样做时，返回[…state，action.currentUser]；或[…state，action.currentUser]应用程序返回我所有用户，不只是currentUserYes您需要在单击“编辑”按钮时从组件启动一个操作，然后传递用户id并将用户详细信息复制到currentUser并将currentUser映射到NewUser组件中不确定为什么要合并？

import React from 'react';
import { connect } from 'react-redux';
import User from '../components/User';
import { deleteUser, updateUser } from '../actions/user';

function UserList({ users, onDelete, onEdit }) {
    if (!users.length) {
        return (
            <div className="margin-top">
                No Users
            </div>
        )
    }
    return (
        <div className="margin-top">
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">Nome</th>
                        <th scope="col">CPF/CNPJ</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map(user => {
                        return (
                            <User user={user} onDelete={onDelete} key={user._id} onEdit={onEdit} />
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
}

const mapStateToProps = state => {
    return {
        users: state.users
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onDelete: id => {
            dispatch(deleteUser(id));
        },
        onEdit: id => {
            dispatch(updateUser(id))
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(UserList);

import { ADD_USER, DELETE_USER, UPDATE_USER, FETCH_USER } from '../constants/ActionTypes';

export default function userReducer(state = [], action) {
    switch (action.type) {
        case ADD_USER:
            return [...state, action.payload];
        case DELETE_USER:
            return state.filter(user => user._id !== action.payload.id);
        case UPDATE_USER:
            return [...state, action.payload];
        case FETCH_USER:
            return action.users;
        default:
            return state;
    }
}

const initialState = {
    users: [],
    currentUser: {},
}

export default function userReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_USER:
            return [...state, action.payload];
        case DELETE_USER:
            return state.filter(user => user._id !== action.payload.id);
        case UPDATE_USER:
            return updateObject(state, action)
        case UPDATE_CURRENT_USER:
            return [...state, action.currentUser];
        case FETCH_USER:
            return action.users;
        default: 
            return state;
    }
}

function updateObject(array, action) {

    return array.map((item, index) => {
        if (item._id !== action.payload._id) {
            return item
        }

        return {
            ...item,
            ...action.payload
        }
    })
}

import { combineReducers } from 'redux';
import users from './userReducer';
import currentUser from './userReducer';

export default combineReducers({
    users: users,
    currentUser: currentUser
});

//Ommited
export const updateCurrentUserSuccess = (currentUser) => {
    return {
        type: UPDATE_CURRENT_USER,
        currentUser
    }
}

export const updateCurrentUser = (id) => {
    return (dispatch) => {
        return axios.get(`${apiUrl}/users/${id}`)
            .then(response => {
                dispatch(updateCurrentUserSuccess(response.data.data))
            })
            .catch(error => {
                throw (error);
            });
    };
};
//Ommited

import React from 'react';
import { connect } from 'react-redux';
import User from '../components/User';
import { deleteUser, updateCurrentUser } from '../actions/user';
import NewUser from '../components/NewUser';

function UserList({ users, onDelete, onEditUser }) {
    if (!users.length) {
        return (
            <div className="margin-top">
                No Users
            </div>
        )
    }
    return (
        <div className="margin-top">
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">Nome</th>
                        <th scope="col">CPF/CNPJ</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map(user => {
                        return (
                            <User user={user} onDelete={onDelete} onEditUser={onEditUser} key={user._id} />
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
}

const mapStateToProps = state => {
    return {
        users: state.users
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onDelete: id => {
            dispatch(deleteUser(id));
        },
        onEditUser: (id) => {
            dispatch(updateCurrentUser(id))
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(UserList, NewUser);

const initialState = {
  users: [],
  currentUser :{},
}

export default function userReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_USER:
            return [...state, action.payload];
        case DELETE_USER:
            return state.filter(user => user._id !== action.payload.id);
        case UPDATE_USER:
            return [...state, action.payload];
        case FETCH_USER:
            return action.users;
        default:
            return state;
    }
}