大佬教程收集整理的这篇文章主要介绍了redux store 改变时如何更新功能组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试使用 MaterialUI 制作表格，数据来自 Psql 数据库。我有一个自定义钩子来调度动作，并使用 useSELEctor 填充我的组件。但是，我在组件中有一个表单，当提交时，表中的数据没有更新，因此应用程序崩溃，因为 arr.map 函数失败。如何在不重新加载页面的情况下在提交表单时更新商店。目前我能做到这一点的唯一方法是允许表单提交的默认设置。@H_301_1@
我的减速器@H_301_1@
switch (action.typE) {
case LOGIN_USER:
case FETCH_USER:
case REGISTER_USER:
return action.payload;
case GET_user_iNFO:
case updatE_USER:
return { ...state,...action.payload };
case FETCH_all_USERS:
return {...state,users: action.payloaD};
case logoUT_USER:
return INITIAL_STATE;
default:
return state;
}
}
export default userReducer;
我的操作@H_301_1@
return async function(dispatch) {
try {
const user = await kfshAPI.register(data);
// localstorage.setItem('user-token',user.token);
await dispatch(userRegistered(user));
await dispatch(
adDalert(
`Registration successful! ${data.firstnamE}'s account has been created!`,'success'
)
);
} catch (err) {
err.forEach((error) => dispatch(adDalert(error,'error')));
}
};
};
// user registered
const userRegistered = (user) => {
return { type: REGISTER_USER,payload: user };
};
我的钩子@H_301_1@
import { usedispatch } from 'react-redux';
import { adDalert } from '../actions/actions';
export const useFetchHook = (endpoint) => {
const dispatch = usedispatch();
const [ loading,setLoading ] = useState(true);
const getData = async (endpoint) => {
setLoading(true);
try {
await dispatch(endpoint);
} catch (error) {
await dispatch(adDalert(error,'error'));
}
setLoading(false);
};
useEffect(() => {
getData(endpoint)
},[])
return [loading];
};
我的表格组件@H_301_1@
const classes = useStyles();
const [openPopup,setopenPopup] = useState(false)
const [ loading ] = useFetchHook(fetchUsers());
const { users } = useSELEctor((statE) => state.user);
const [ filterFunc,setFilterFunc ] = useState({
func: (items) => {
return items;
}
});
const dispatch = usedispatch();
const { tableContainer,tableheader,tablePagination,recordsAfterSorTing } = usetable(
users,headCells,filterFunc
);
const handleSearch = (E) => {
// e.preventDefault();
const target = e.target;
setFilterFunc({
func: (items) => {
if (target.value === '') return items;
else
return items.filter(
(X) =>
x.firstname.tolowerCase().includes(target.value.tolowerCase()) ||
x.lastname.tolowerCase().includes(target.value.tolowerCase())
);
}
});
};
{loading && <h1>LOADING Users...</h1>}
const addOrEdit = (user,handlereset) => {
async function get() {
try {
await dispatch(registerUser(user));
// history.goBACk();
} catch (err) {
dispatch(adDalert(err,'error'));
}
}
get();
handlereset();
setopenPopup(false);
};
return (
<div>
<Pageheader
title='VIEw Users'
subtitle='IT Department'
icon={<GroupIcon FontSize='large' />}
/>
<Paper classname={Classes.pageContent}>
<Toolbar>
<button
label='Add New User'
variant='outlined'
startIcon={<Add />}
classname={Classes.newbutton}
onClick={() => setopenPopup(true)}
/>
</Toolbar>
{!loading && (
<React.Fragment>
<tableContainer>
<tableheader />
<tableBody>
{recordsAfterSorTing().map((item) => (
<tableRow key={item.ID}>
<tableCell>{item.ID}</tableCell>
<tableCell>
{item.firstnamE} {item.lastnamE}
</tableCell>
<tableCell>{item.is_admin ? "Yes" : "No"}</tableCell>
</tableRow>
))}
</tableBody>
</tableContainer>
<tablePagination />
</React.Fragment>
)}
</Paper>
<Popup openPopup={openPopup} setopenPopup={setopenPopup} title="Add New User">
<Registration addOrEdit={addOrEdit}/> //<-- Form as a popup
</Popup>
</div>
);
}
我的表单组件@H_301_1@
const initialValues = {
ID: '',password: '',firstname: '',lastname: '',is_admin: false
};
export default function SignUp() {
const classes = useStyles();
// const history = useHistory();
const dispatch = usedispatch();
const valIDation = (fIEldValues = formData) => {
const temp = { ...errors };
if ('ID' in fIEldValues)
temp.ID = formData.ID.length !== 0 ? '' : 'employee ID is required';
if ('firstname' in fIEldValues)
temp.firstname = formData.firstname ? '' : 'First name is required';
if ('lastname' in fIEldValues)
temp.lastname = formData.lastName ? '' : 'last name is required';
if ('password' in fIEldValues)
temp.password =
formData.password.length > 4 ? '' : 'password should be more than 4 characters';
setErrors({ ...temp });
if (fIEldValues === formData) return Object.values(temp).every((i) => i === '');
};
const { formData,handlereset,handleChange,errors,setErrors,setFormData } = useForm(
initialValues,true,valIDation
);
const handlesubmit = async (E) => {
e.preventDefault();
if (valIDation()) {
try {
await dispatch(registerUser(formData));
// history.goBACk();
} catch (err) {
dispatch(adDalert(err,'error'));
}
handlereset();
}
};
return (
<Container component='main' maxWIDth='xs'>
<CSSBaseline />
<div classname={Classes.paper}>
<Avatar classname={Classes.avatar}>
<LockOutlineDicon />
</Avatar>
<Typography component='h1' variant='h5'>
Sign up
</Typography>
</div>
{/* <form classname={Classes.form} onsubmit={handlesubmit} novalIDate> */}
<Form onsubmit={handlesubmit}>
<GrID container spacing={2}>
<GrID item xs={12} sm={6}>
<input
name='firstname'
label='First name'
value={formData.firstnamE}
onChange={handleChangE}
ID='firstname'
required
error={errors.firstnamE}
/>
</GrID>
<GrID item xs={12} sm={6}>
<input
name='lastname'
label='last name'
value={formData.lastName}
onChange={handleChangE}
ID='lastname'
required
error={errors.lastnamE}
/>
</GrID>
<GrID item xs={12}>
<input
name='ID'
label='employee ID'
value={formData.ID}
onChange={handleChangE}
ID='ID'
required
type='number'
error={errors.ID}
/>
</GrID>
<GrID item xs={12}>
<input
name='password'
label='password'
value={formData.passworD}
onChange={handleChangE}
ID='password'
required
type='password'
error={errors.passworD}
/>
</GrID>
<GrID item xs={12}>
<checkBox
name='is_admin'
label='admin Account'
value={formData.is_admin}
onChange={handleChangE}
/>
</GrID>
</GrID>
<GrID container spacing={2}>
<GrID item xs={12} md={6}>
<button
type='submit'
fullWIDth
variant='outlined'
color='priMary'
size='large'
label='Sign Up'
/>
</GrID>
<GrID item xs={12} md={6}>
<button
fullWIDth
size='large'
label='reset'
variant='outlined'
onClick={handlereset}
color='secondary'
/>
</GrID>
</GrID>
</Form>
</Container>
);
}
我知道我已经发布了很多，我真的很抱歉，我只是不知道还能去哪里。如果有任何不清楚的地方，请告诉我，我会用更多信息更新这篇文章。@H_301_1@
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
以上是大佬教程为你收集整理的redux store 改变时如何更新功能组件全部内容，希望文章能够帮你解决redux store 改变时如何更新功能组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。