Reactjs React以某种方式调用一个setState来修改我的数据
我有动态数据，当我改变“周期”钩子时，这些数据应该会改变。我只在onclick按钮中调用“setPeriod”钩子，但不知何故，React似乎是在未知位置调用“setPeriod”，因为当我更改输入值时，我的数据会发生更改，这是一种不良效果。 首先，我希望“ephemeralData”存储输入的数据，然后我希望“applyHandler”函数调用“setPeriod”钩子并将“ephemeralData”作为参数传递，这样我的动态文本就会改变。不明白为什么它不起作用Reactjs React以某种方式调用一个setState来修改我的数据,reactjs,react-hooks,Reactjs,React Hooks,我有动态数据，当我改变“周期”钩子时，这些数据应该会改变。我只在onclick按钮中调用“setPeriod”钩子，但不知何故，React似乎是在未知位置调用“setPeriod”，因为当我更改输入值时，我的数据会发生更改，这是一种不良效果。 首先，我希望“ephemeralData”存储输入的数据，然后我希望“applyHandler”函数调用“setPeriod”钩子并将“ephemeralData”作为参数传递，这样我的动态文本就会改变。不明白为什么它不起作用 const [p
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>
)
const[period，setPeriod]=使用状态([
{
天:"伦迪",，
星空：0，
完时:1
},
{
day:‘Mardi’，
星空：0，
完时:1
},
{
day:‘Mercredi’，
星空：0，
完时:1
},
{
day:“Jeudi”，
星空：0，
完时:1
},
{
日期：'Vendredi'，
星空：0，
完时:1
},
{
day:‘Samedi’，
星空：0，
完时:1
},
{
day:“迪曼奇”，
星空：0，
完时:1
},
])
常量[蜉蝣数据，set蜉蝣数据]=useState([
{
天:"伦迪",，
星空：0，
完时:1
},
{
day:‘Mardi’，
星空：0，
完时:1
},
{
day:‘Mercredi’，
星空：0，
完时:1
},
{
day:“Jeudi”，
星空：0，
完时:1
},
{
日期：'Vendredi'，
星空：0，
完时:1
},
{
day:‘Samedi’，
星空：0，
完时:1
},
{
day:“迪曼奇”，
星空：0，
完时:1
},
])
常数小时=[‘分钟’、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']）；
常数handleChange=（e）=>{
常量{value}=e.target
设定状态({
……国家，
[事件.目标.名称]：值
})
}
常量deletePeriodHandler=（索引）=>{
让newArr=[…选项]；
newArr[index]=“完全可用”
设置选项（newArr）
让newPeriod=[…period]
newPeriod[索引][开始时间]=0
newPeriod[index][endHour]=0
设置周期（新周期）
}
常量blockDayHandler=（索引）=>{
让newArr=[…选项]；
newArr[index]=“不可用”
设置选项（newArr）
}
常量handleEphemeralChangePeriod=（索引，e）=>{
设{value}=e.target
如果（值=='minuit'）值=0
让newArr=[…短暂数据]
newArr[index][e.target.name]=值
setEphemeralData（纽瓦尔）
}
常量applyHandler=（索引）=>{
让newArr=[…选项]；
newArr[index]=“期间”
设置选项（newArr）
让newData=[…临时数据]
设置周期（新数据）
}
返回(
[缩短的代码不会打扰您！]
{period.map（（元素，索引）=>{
返回
在{element.day}
{
(() => {
如果（选项[索引]=“期间”）
返回
De{period[index].startHour}h{period[index].endHour}h
deletePeriodHandler（索引）}>Supplimer
如果（选项[索引]==='fullyAvailable'）
返回您有争议的日志
其他（选项[索引]=“不可用”）
返回不可分割
})()
}
扩散系数
handleEphemeralChangePeriod（索引，e）}
值={ephemeralData[index].startHour}
>
{hours.map（（元素，索引）=>{
返回{element}
})}
à
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)
}