反应异步计时问题，导致模式在 state 更改后弹出预填充表单？

Question

I have a setCurrentProject call using useState, useEffect hooks api but the modal pops up before the state has been set and it causes the data to throw an error or be blank if i throw in a conditional to check if it's there.

How do I make sure the state changes before the modal opens with the correct prop data

const EditProjectModal = ({modalOpen, handleClose, addTask, currentProject}) => {
    const [name, setName] = useState("");
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    const [projectTasks, setProjectTasks] = useState([]);

    useEffect(() => {
        setName(currentProject.name)
        setProjectTasks(currentProject.tasks)
        setStartDate(currentProject.startDate)
        setEndDate(currentProject.endDate)
    }, [currentProject])

    return(
        <Modal
        centered={false}
        open={modalOpen}
        onClose={handleClose}
        >
            <Modal.Header>Edit Project</Modal.Header>
            <Modal.Content>
                <Form onSubmit={handleSubmit}>
                    <Form.Group widths="equal">

                        <Form.Field
                            control={Input}
                            label="Project" 
                            placeholder="Enter the name of your project..."
                            required 
                            value={name}
                            onChange={handleName}
                        />
                    </Form.Group>

                    <Form.Group widths='equal'>

                        <Form.Field required>
                            <label>Start Date</label>
                            <DatePicker 
                                selected={startDate}
                                onChange={date => setStartDate(date)}
                                selectsStart
                                startDate={startDate}
                                endDate={endDate}
                            />
                        </Form.Field>

                        <Form.Field required>
                            <label>End Date</label>
                            <DatePicker 
                                selected={endDate}
                                onChange={date => setEndDate(date)}
                                selectsEnd
                                startDate={startDate}
                                endDate={endDate}
                                minDate={startDate}
                                placeholderText="Select end date.."
                            />
                        </Form.Field>

                    </Form.Group>

                    <ProjectTasksContainer projectTasks={projectTasks} setProjectTasks={setProjectTasks}/>

                    <Divider hidden/>

                    <Button type='submit'>Submit</Button>
                </Form>
            </Modal.Content>
        </Modal>

I've left out some of the change functions etc because that's not important to the state change.

It's being triggered by a button from another component

const handleEdit = () => {
        setCurrentProject(project)
        handleEditProjClick();
    }

edited to add dashboard that uses the editProjectModal

const Dashboard = ({notes, setNotes, tasks, setTasks, goals, setGoals, projects, setProjects}) => {
    //============== STATE VARIABLES ===================//
    const [projModalOpen, setProjModalOpen] = useState(false);
    const [editProjModalOpen, setEditProjModalOpen] = useState(false);
    const [currentProject, setCurrentProject] = useState({});

    //============== MODALS ===================//

    const handleProjModalOpen = () => {
        setProjModalOpen(true);
    }

    const handleProjModalClose = () => {
        setProjModalOpen(false);
    }

    const handleEditProjModalOpen = () => {
        setEditProjModalOpen(true);
    }

    const handleEditProjModalClose = () => {
        setEditProjModalOpen(false);
    }

    //============== RENDERING FUNCTION ===================//
    return (
        <Fragment>
                    <Grid columns={2}>
                        <Grid.Row stretched>

                            <Grid.Column width={12}>

                                <Container style={{width: "90%"}}>
                                    <Segment basic>
                                        <Segment textAlign="right">
                                            <ProjectButton handleClick={handleProjModalOpen}/>
                                            <ProjectModal handleClose={handleProjModalClose} modalOpen={projModalOpen} addTask={addTask} addProject={addProject} />
                                            <EditProjectModal handleClose={handleEditProjModalClose} modalOpen={editProjModalOpen} addTask={addTask} currentProject={currentProject} />
                                        </Segment>

                                </Container>

                            </Grid.Column>

                            <Grid.Column width={4}>
                                <Segment>
                                    <ProgressContainer projects={projects} handleProjClick={handleProjModalOpen} handleEditProjClick={handleEditProjModalOpen} setCurrentProject={setCurrentProject}/>
                                </Segment>
                            </Grid.Column>

                        </Grid.Row>
                    </Grid>
        </Fragment>
    )
}

the parent holds the setCurrentProject state and passes it down to that child and also passes down the handleEditProjClick();

What's the best way to handle this issue?

Cheers!

Answer 1

Because editProjModalOpen and currentProject are independent you could get a situation where editProjModalOpen is true and currentProject is {} - you'd need to account for that, eg {.isEmpty(currentProject) && <EditProjectModal... /.>}

This would then guarantee currentProject is set in EditProjectModal and you could just set the initial values in state off the currentProject :

const [name, setName] = useState(currentProject.name);
const [startDate, setStartDate] = useState(currentProject.startDate);

Or if you have to useEffect then just check the state before rendering the modal:

if (!name ) {
   return null
}