useEffect(() => { resPosition.forEach((item) => ((item.children.forEach((it) => ( optionPerson.push(it.value) ))))) optionPerson.map((item) => ({ value:item, })) console.log('optionPerson1',optionPerson) console.log('optionPerson2',optionPerson) },[resPosition,optionPerson]),为什么optionPerson.map((item) => ({ value:item, }))没有执行
时间: 2024-02-01 10:02:45 浏览: 22
可能是因为你没有对 `optionPerson` 进行更新。在 React 中,`useState` 和 `useEffect` 都是异步的,因此在 `useEffect` 中更新了 `optionPerson`,并不会立即生效,需要等到下一次渲染才会生效。
如果你想要执行 `optionPerson.map((item) => ({ value:item }))`,你可以将它放在一个 useEffect 中,并将 `optionPerson` 作为依赖项,这样当 `optionPerson` 更新后,就会触发该 useEffect。例如:
```
useEffect(() => {
const options = optionPerson.map((item) => ({ value: item }));
console.log(options);
}, [optionPerson]);
```
这样,当 `optionPerson` 更新后,就会在控制台输出 `optionPerson` 的每个元素的 value 值。
相关问题
帮我优化一下 下面的代码 _list.forEach(item=>{ item.child.forEach(i=>{ i.forEach(k=>{ if (k.id === id) { dropData = k } }) }) }) _list.forEach(item => { item.child.forEach(val=>{ val.forEach(k=>{ if (k.timetableInputId === dropData.timetableInputId && k.sequence === dropData.sequence && k.week === dropData.week && +k.classPeriodType === 4 ) { k.classId = item.id dropDataPackage.push(k) } }) }) })
可以将上述代码进行优化,通过使用 Array 的内置方法,例如 `find` 和 `filter` 等,可以提高代码的可读性和执行效率。下面是一个可能的优化版本:
```
const dropData = _list.flatMap(item => item.child.flat().find(i => i.some(k => k.id === id)))
if (dropData) {
const dropDataPackage = _list.flatMap(item => item.child.flat().filter(val => val.some(k => k.timetableInputId === dropData.timetableInputId && k.sequence === dropData.sequence && k.week === dropData.week && +k.classPeriodType === 4)).map(k => { k.classId = item.id; return k }))
}
```
优化后的代码使用了 `flatMap` 和 `find` 方法来查找匹配的 `dropData` 对象,使用 `flatMap` 和 `filter` 方法来查找匹配的 `dropDataPackage` 数组,并使用 `map` 方法将 `classId` 添加到匹配的对象中。
优化这段代码 res.data.availablePlayItemVoList.forEach((item: any) => { this.playDateProductInfoList.forEach((v: any) => { v.playScreeningList.forEach((items: any) => { if (items.playItemCode == item.playItemCode) { this.$set( items, "availableTotal", item.availableTotal != null ? item.availableTotal : null ); } if (item.screeningList.length > 0) { item.screeningList.forEach((itemA: any) => { if (items.sysTimeQuantumList != null) { items.sysTimeQuantumList.forEach((itemB: any) => { if (itemA.screeningCode == itemB.screeningCode) { this.$set( itemB, "surplusTotal", itemA.surplusTotal != null ? itemA.surplusTotal : null ); } }); } }); } }); }); }); });
这段代码也可以使用ES6的数组方法进行优化,如下所示:
```javascript
res.data.availablePlayItemVoList.forEach(item => {
this.playDateProductInfoList.forEach(v => {
v.playScreeningList.filter(items => items.playItemCode === item.playItemCode)
.forEach(items => {
this.$set(
items,
"availableTotal",
item.availableTotal != null ? item.availableTotal : null
);
item.screeningList.forEach(itemA => {
if (items.sysTimeQuantumList != null) {
items.sysTimeQuantumList.filter(itemB => itemA.screeningCode === itemB.screeningCode)
.forEach(itemB => {
this.$set(
itemB,
"surplusTotal",
itemA.surplusTotal != null ? itemA.surplusTotal : null
);
});
}
});
});
});
});
```
同样地,使用`filter`方法可以减少循环嵌套,使代码更加清晰易读。另外,可以使用ES6的箭头函数来简化代码。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)