javascript - 在 Reactjs 中使用 UseState
问题描述
我正在尝试将 userIDs 的值映射到 listUserIds,然后使用 listUserIds 的值作为 listUser 函数中的键。但它只显示最后一个值。我做错了什么?
function Search(props) {
var listUserIds = []
const [userIDs, setUserIDs] = useState([]);
useEffect( async() => {
console.log('useEffect has been called!');
await userService.getUserAll().then(response => {
var listUser = response.data;
listUser.forEach(element => {
setUserIDs([element.id]);
});
})
.finally()
}, []);
Object.values(userIDs).forEach(x => listUserIds.push(x));
listUserIds.forEach(x => console.log(x));
const listUser = listUserIds.map((userId) =>
<div key={userId}>
<ThumbnailAdmin id={userId} ></ThumbnailAdmin>
</div>
)
return (
<div class="col-lg-9 mt-4 mt-lg-0" style={{marginLeft:"200px"}}>
<div class="row" >
<div class="col-md-12">
<div class="user-dashboard-info-box table-responsive mb-0 bg-white p-4 shadow-sm">
{listUser}
</div>
</div>
</div>
</div>
);
}
解决方案
您可以像这样设置值。使用地图,您可以收集所有 ID,然后您可以更新状态。
await userService.getUserAll().then(response => {
var listUser = response.data;
let ids = listUser.map(element => element.id);
setUserIDs(ids);
})
推荐阅读
- android - 如何在不点击的情况下在 x 秒后在 Kotlin 中的片段之间转换(如启动屏幕)
- javascript - 为什么增量运算符的位置很重要
- c# - 在 C# 中制作模型时遇到困难
- java - 如何修复写入文件内部存储器android的权限错误?
- flutter - Flutter:关闭 PageRoute 后,CupertinoTabScaffold 选项卡内容不刷新
- python - 将值与 pandas DataFrame 中的前一行进行比较并用黄色和绿色着色
- firebase - Imagepicker'XFile'不是类型转换和Firebase存储图像上传错误中'File'类型的子类型
- python - 熊猫如何将函数应用于 groupby().first()
- zpl - ZEBRA ZPL 标签格式与文本一起打印报价单
- tensorflow - 在 tensorflow 2.3 中执行量化感知训练 (QAT) 时无法访问正则化损失值