如何解决React Redux：如何根据将要更改的数据创建状态对象以及如何更新每个对象中的各个元素
问题：我不知道如何组织状态以轻松地对其进行更改。它作为对象数组检索。它被映射到组件中，但是要对单个元素进行更新，然后找出如何在数据库中更新这些元素。
应用程序设置：React Redux Saga Node Express Postgres
fetch调用检索一个对象数组（用户详细信息），将其添加到状态对象中，然后将该数组用于映射具有4个输入的组件。我希望能够更改任何对象的任何元素并将其更新为状态。然后，我将添加访存以更新对数据库原始数据的任何更改。我正在寻找诸如网站，书籍，课程等信息，这些信息将有助于建立基础，以便我可以解决此问题。
下面供参考的是我的代码的各个部分；
数据
userData: Array(4)
0: {firstname: "shane",surname: "smith",email: "shanesmith@gmail.com",auth: false}
1: {firstname: "Sahne",surname: "Smith",email: "shane@gmail.com",auth: false}
etc....
减速器
FETCH_ADMIN_PAGE_START,FETCH_ADMIN_PAGE_SUCCESS,FETCH_ADMIN_PAGE_FAILURE,UPDATE_ADMIN_USER_DATA,} from "../types/types";
// import utility functions
const INITIAL_STATE = {
isFetching: false,userData: [],errorMessage: null,};
const adminReducer = (state = INITIAL_STATE,action) => {
switch (action.type) {
case FETCH_ADMIN_PAGE_START:
return {
...state,isFetching: true,};
case FETCH_ADMIN_PAGE_SUCCESS:
return {
...state,isFetching: false,userData: action.payload.user[0],};
case FETCH_ADMIN_PAGE_FAILURE:
return {
...state,errorMessage: action.payload,};
case UPDATE_ADMIN_USER_DATA:
return {
...state,userData: [haven't found a silution],};
default:
return state;
}
};
export default adminReducer;
动作
import {
FETCH_ADMIN_PAGE_START,} from "../types/types";
export const fetchAdminPageStart = () => ({
type: FETCH_ADMIN_PAGE_START,});
export const fetchAdminPageSuccess = (data) => ({
type: FETCH_ADMIN_PAGE_SUCCESS,payload: data,});
export const fetchAdminPageFailure = (errorMessage) => ({
type: FETCH_ADMIN_PAGE_FAILURE,payload: errorMessage,});
export const updataAdminUserData = (data) => ({
type: UPDATE_ADMIN_USER_DATA,});
组件
import * as React from "react";
import { useState,useEffect } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import PropTypes from "prop-types";
// Material Ui Componnents
import AppBar from "@material-ui/core/AppBar";
import Tab from "@material-ui/core/Tab";
//Components
import UserDetailsComponent from "../../components/container-withheader/users-details.component";
// Styled Components
import { StyledTabs } from "./admin-page.styles";
// Selectors
import { selectAdminPageUserData } from "../../redux/admin-page/admin-page.selectors";
// Actions
import { updataAdminUserData } from "../../redux/admin-page/admin-page.actions";
const AdminPageComponent = ({ userDetails,updataAdminUserData }) => {
useEffect(() => {},[]);
// const [userData,setUserData] = useState({ users: userDetailData });
const [selectedTab,setSelectedTab] = useState(0);
const handleTabChange = (event,newValue) => {
setSelectedTab(newValue);
};
const handleChangeData = (event) => {
console.log(event.target.name);
return updataAdminUserData(event.target);
};
const handleToggleChange = (event) => {
console.log(event.target);
return updataAdminUserData(event.target);
};
const tabArray = ["Users","Options"];
return (
<div>
<AppBar position='static' color='default'>
<StyledTabs
value={selectedTab}
onChange={handleTabChange}
variant='scrollable'
scrollButtons='auto'
aria-label='scrollable auto tabs example'
>
{tabArray.map((tab,i) => (
<Tab label={tab} key={i} />
))}
</StyledTabs>
</AppBar>
{selectedTab === 0 && (
<UserDetailsComponent
userData={userDetails}
handleChangeData={handleChangeData}
handleToggleChange={handleToggleChange}
/>
)}
</div>
);
};
AdminPageComponent.propTypes = {
userDetails: PropTypes.object,updataAdminUserData: PropTypes.func,};
const mapStateToProps = createStructuredSelector({
userDetails: selectAdminPageUserData,});
const mapDispatchToProps = (dispatch) => ({
updataAdminUserData: (data) => dispatch(updataAdminUserData(data)),});
export default connect(mapStateToProps,mapDispatchToProps)(AdminPageComponent);
以上的子组件
import React,{ useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import PropTypes from "prop-types";
// Styled Components
import {
StyledToolBar,GridContainer,RightElement,StyledTextField,StyledSwitch,} from "./users-details.styles";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,},}));
const UserDetailsComponent = ({
userData,handleChangeData,handleToggleChange,}) => {
const classes = useStyles();
const [edit,setEdit] = useState({
editUser: true,});
const handleEditChange = (event) => {
setEdit({ ...edit,[event.target.name]: event.target.checked });
};
return (
<div className={classes.root}>
<br></br>
<StyledToolBar elevation={3}>
<GridContainer>
<RightElement>
<FormControlLabel
control={
<Switch
checked={edit.editUser}
onChange={handleEditChange}
name='editUser'
/>
}
label='Edit User'
/>
</RightElement>
</GridContainer>
</StyledToolBar>
<br></br>
<Paper styles={{ paddingTop: "2rem" }} elevation={3}>
<form className={classes.root} noValidate autoComplete='on'>
{userData.map((user,i) => (
<div key={i}>
<StyledTextField
name={Number(i)}
title={"Enter first name here"}
alt={"firstname"}
id={`firstname`}
input={`firstname`}
onChange={handleChangeData}
disabled={edit.editUser}
label='First Name'
value={user.firstname}
variant='outlined'
/>
<StyledTextField
name={Number(i)}
id={"surname"}
disabled={edit.editUser}
label='Surame'
value={user.surname}
variant='outlined'
/>
<StyledTextField
name={Number(i)}
id={"email"}
disabled={edit.editUser}
label='Email'
value={user.email}
variant='outlined'
/>
<React.Fragment>
<FormControlLabel
control={
<StyledSwitch
disabled={edit.editUser}
checked={user.auth}
onChange={handleToggleChange}
name={Number(i)}
id={"auth"}
/>
}
label='Has Administration Access'
/>
</React.Fragment>
</div>
))}
</form>
</Paper>
</div>
);
};
export default UserDetailsComponent;
如您所见，我还需要找到一种更好的方式来传递信息，以区分我希望修改的每个状态。
我不知道是否应该将数组修改为另一种类型的对象，如果这样做，该如何映射用户。什么是解决此问题的最佳做法。
最终，我只想学习或针对可以帮助我克服此问题的信息方向。任何帮助，如果万分感谢。
谢谢。
解决方法
已解决-转换为对象，名称中使用了多个值，然后拆分为数组。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。