oksetState 函数在 react hooks 中没有更新

Question

我正在通过下拉按钮选择用户数量后呈现多个表单， 我正在为那些生成的用户动态生成帮助文本和用户数据状态。

这是我初始化状态对象的地方

const [selectedIndex, setSelectedIndex] = React.useState(0);
const [registrationData,setRegistrationData]=React.useState([]);
const [error,setError]=React.useState({});
const [registrations]=React.useState([]);
const [campaign, setCampaign] = React.useState({});

这是下拉按钮的处理：

const handleMenuItemClick=(event, index)=>{
console.log("CLicked "+(index+1))
setSelectedIndex(index);
setAnchorEl(null); 
};

这是使用 useImpact 动态生成状态的地方：

useEffect(()=>{
setCampaign(prevCampaign => ({
...prevCampaign,
...Object.assign({}, ...[...new Array(10).keys()].map(i => ({
[i]: {
sms_campaign: false,
email_campaign: false,
}
})))
}));
setError(prevError => ({
...prevError,
...Object.assign({}, ...[...new Array(10).keys()].map(i => ({
[i]: {
uscf_id:"",
first_name:"",
middle_name:"",
last_name:"",
city:"",
state:"",
country:"",
phone_number:"",
email_id:"",
}
})))
}));
setRegistrationData(prevReg => ({
...prevReg,
...Object.assign({}, ...[...new Array(10).keys()].map(i => ({
[i]: {
uscf_id:"",
first_name:"",
middle_name:"",
last_name:"",
sections:"",
city:"",
state:"",
country:"",
phone_code:"",
phone_number:"",
email_id:"",
sms:"",
email:""
}
})))
}));
},[selectedIndex])

这是我渲染卡片的地方：

registrations.filter((index)=>{
return (index<selectedIndex);
}).map((registration,index)=>{
return(
<Card className={classes.cardLayout}>
<Avatar className={classes.icon}>
{index+1}
</Avatar>
<CardContent className={classes.cardContent}>
<TextField
id="outlined-error-helper-text"
label="ID"
name="id"
placeholder="Enter ID"
variant="outlined"
helperText={error[index].id}
error={(error[index].id===null||error[index].d==="")?false:true}
onChange={(event)=>updateUserdata(event,index)}
className={classes.textField}
/>
.....
.....

这是处理下拉按钮的位置：

<Button
aria-controls="simple-menu" 
aria-haspopup="true" 
variant="outlined" 
color="inherit"  
label="registrations"
style={{marginLeft:20}}
endIcon={<ArrowDropDownIcon/>}
onClick={(event)=>handleClick(event)}
>
<Typography variant="body2" color="inherit">
//here , I have mentioned selectedIndex+1 to just show 1 instead of 0
{selectedIndex+1}
</Typography>
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted    
open={Boolean(anchorEl)}
onClose={handleClose}
>
{[1,2,3,4,5,6,7,8,9,10].map((option, index) => (
<MenuItem                                       
style={{paddingRight:85}}
key={option}
name="no_of_registrations"
selected={(index === selectedIndex)}
onClick={(event) => handleMenuItemClick(event, index)}
>
{option}
</MenuItem>
))}
</Menu>

我也有表单验证，当用户单击注册按钮时，我会调用它来对字段执行检查，现在只有选定的索引卡字段正在设置错误文本，以前的剩余卡未设置错误文本。

const formValidation=()=>{
console.log("entered Form validation function")
let valid=true;
for(var i=0;i<selectedIndex;i++){
if(registrationData[i].id===""){
setError((error)=>({...error,[i]:{...error[i],id:"required" }}))
valid=false
}else {
if(!(registrationData[i].id).match(/^[0-9]+$/)||([registrationData[i].id].length!==10)){
setError((error)=>({...error,[i]:{...error[i],id:"required" }}))
valid=false
}else{
setError((error)=>({...error,[i]:{...error[i],id:"required" }}))
}
}
....

Answer 1

您必须只更新一次状态，并且不能在不使用状态更新程序回调的情况下特别在 for 循环中更新。

您可以通过在每个状态更新程序中返回对象值来执行更新，方法是映射创建的长度等于 selectedIndex 的数组

useEffect(()=>{
setCampaign(prevCampaign => ({
...prevCampaign,
...Object.assign({}, ...[...new Array(10).keys()].map(i => ({
[i]: {
sms_campaign: false,
email_campaign: false,
}
})))
}));
setError(prevError => ({
...prevError,
...Object.assign({}, ...[...new Array(10).keys()].map(i => ({
[i]: {
id:"",
first_name:"",
middle_name:"",
last_name:"",
city:"",
state:"",
country:"",
phone_number:"",
email_id:"",
}
})))
}));
setRegistrationData(prevReg => ({
...prevReg,
...Object.assign({}, ...[...new Array(10).keys()].map(i => ({
[i]: {
id:"",
first_name:"",
middle_name:"",
last_name:"",
sections:"",
city:"",
state:"",
country:"",
phone_code:"",
phone_number:"",
email_id:"",
sms:"",
email:""
}
})))
}));
},[selectedIndex])