oksetState 函数未在反应挂钩中更新

Question

I am rendering the multiple forms upon the selection of no of users done through a dropdown button, where I am generating helper text and userdata state for those generated users dynamically.

this is where I initialize the state objects

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({});

THis is the handling of the drop-down button:

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

And this is the where the states are generated dynamically using the useEffect:

 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])

This is where I render cards:

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}
                            />
.....
.....

This is where the dropdown button is handled:

 <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>

I also have form validation which I call when the user clicks on the register button, to perform the checks on fields and now only the selectedIndex card fields are setting the error text previous remaining cards are not set with the error text.

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

You must update your state only once and not within a for loop specially without using a state updater callback.

You can perform the update by returning the object values within each state updater by mapping over an array created of length equal to 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])