reactjs - React 以某种方式调用 setState 来修改我的数据

Question

我有动态数据，当我更改“句号”挂钩时应该会更改。我只在 onclick 按钮中调用“setPeriod”钩子，但不知何故，React 似乎在一个未知的地方调用“setPeriod”，因为当我更改输入值时我的数据会发生变化，这是不受欢迎的效果。首先，我希望“ephemeralData”存储我的输入数据，然后我希望“applyHandler”函数调用“setPeriod”钩子并将“ephemeralData”作为参数传递，所以我的动态文本会改变。无法弄清楚为什么它不起作用

    const [period, setPeriod] = useState([
        {
            day: 'Lundi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Mardi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Mercredi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Jeudi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Vendredi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Samedi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Dimanche',
            startHour: 0,
            endHour: 1
        },
    ])
    const [ephemeralData, setEphemeralData] = useState([
        {
            day: 'Lundi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Mardi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Mercredi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Jeudi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Vendredi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Samedi',
            startHour: 0,
            endHour: 1
        },
        {
            day: 'Dimanche',
            startHour: 0,
            endHour: 1
        },
    ])

    const hours = ['minuit', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
   
    const [options, setOptions] = useState(['period', 'period', 'period', 'period', 'period', 'period', 'period']);
 

    const handleChange = (e) => {
        const { value } = e.target
        setState({
            ...state,
            [event.target.name] : value
        })
    }

   

    const deletePeriodHandler = (index) => {
        let newArr = [...options];
        newArr[index] = 'fullyAvailable'
        setOptions(newArr)
        let newPeriod = [...period]
        newPeriod[index][startHour] = 0
        newPeriod[index][endHour] = 0
        setPeriod(newPeriod)
 
        
    }

    const blockDayHandler = (index) => {
        let newArr = [...options];
        newArr[index] = 'unavailable'
        setOptions(newArr)
        
    }

    const handleEphemeralChangePeriod = (index, e) => {
        let {value} = e.target
        if (value === 'minuit') value = 0
        let newArr = [...ephemeralData]
        newArr[index][e.target.name] = value
        setEphemeralData(newArr)

    }

    const applyHandler = (index) => {
        let newArr = [...options];
        newArr[index] = 'period'
        setOptions(newArr)
        let newData = [...ephemeralData]
        setPeriod(newData)

    }

return (

[SHORTENED CODE NOT TO BOTHER YOU ! ]

<div className={classes.AccordionsContainer}>
                {period.map((element, index) => {

                     
                    return  <div className={classes.Accordion} key={index}>
                                <Card>
                                    
                                    <Collapse isOpen={isAccordionOpen[index]} data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne">
                                        <CardBody>
                                            Vos horaires de disponibilités le {element.day}
                                            <div className={classes.HoursAndDeleteButtonContainer}>
                                                {
                                                    (() => {
                                                        if (options[index] === 'period' )
                                                            return <>
                                                                <span className={classes.Period}>De {period[index].startHour} h à {period[index].endHour} h</span>
                                                                <div className={classes.DeleteButton} onClick={()=>deletePeriodHandler(index)}>supprimer</div>
                                                            </>
                                                        if (options[index] === 'fullyAvailable')
                                                            return <span className={classes.FullyAvaialable}>Vous êtes disponible toute la journée</span>
                                                        else (options[index] === 'unavailable')
                                                            return <span className={classes.Unavailable}>INDISPONIBLE</span>
                                                    })()
                                                }
                                                
                                            </div>
                                            <hr />
                                            <div className={classes.HandleChangePeriodContainer}>
                                                <p className={classes.AddPeriodParagraph}>Ajouter des horaires de disponibilité</p>
                                                <div className={classes.InputPeriodContainer}>
                                                    <div>De</div>
                                                    <Input
                                                        type="select"
                                                        name="startHour"
                                                        id="startHour"
                                                        className={classes.AccordionInput}
                                                        onChange={(e)=>handleEphemeralChangePeriod(index, e)}
                                                        value={ephemeralData[index].startHour}
                                                    >
                                                        
                                                        {hours.map((element, index) => {
                                                            return <option key={index}>{element}</option>
                                                        })}
                                                    </Input>
                                                    <div>à</div>
                                                    <Input
                                                        type="select"
                                                        name="endHour"
                                                        id="endHour"
                                                        className={classes.AccordionInput}
                                                        onChange={(e)=>handleEphemeralChangePeriod(index, e)}
                                                        value={ephemeralData[index].endHour}
                                                    >
                                                        
                                                        {hours.map((element, index) => {
                                                            return <option key={index}>{element}</option>
                                                        })}
                                                    </Input>
                                                    <div className={classes.SubmitButton} onClick={()=>applyHandler(index)}>Appliquer</div>
                                                    <div className={classes.BlockDay} onClick={() => blockDayHandler(index)}>Bloquer la journée</div>
                                                </div>
                                            </div>
                                            
                                        </CardBody>
                                    </Collapse>
                                </Card> 
                            </div>
                        
                })}
            </div>

)

标签： reactjsreact-hooks

Answer 1

正如 AKX 建议的那样，问题是复制我的嵌套对象的更深层次。

const handleEphemeralChangePeriod = (index, e) => {
        let {value} = e.target
        if (value === 'minuit') value = 0
        let newArr = [...ephemeralData]
        newArr[index] = {...newArr[index], [e.target.name]: value}
        setEphemeralData(newArr)
    }