reactjs - 如何在reactjs中将数组显示为Jsx元素
问题描述
有这个用户数组,其中存储在照片中的用户名是从照片数组中拆分出来的,我想在显示按钮时显示数组结果。代码片段如下
let users: string[] = [];
const setUserNames = photo.filepath.split("_")[1];
users.push(setUserNames);
console.log(`Name ->`, users);
return (
<IonRow>
{users.map((users, index) => (
<IonButton key={index}>{users}</IonButton>
))}
</IonRow>
)
解决方案
当心,
users.push(setUserNames)
是可变的,并且不遵守 React 中数据更改的方式。您需要更改user
usinguseState
和 spread 运算符。
此外,我建议您在单独的函数中构建所有数组并返回一个user
数组,然后使用useState
.
然后开始使用JSX
像这样的东西。
const SomeCom = (props) => {
const [users, setUsers] = useState(buildUserArray(props.photos))
return (
users.map(() => {
// Render your JSX
})
)
}
推荐阅读
- swift - Xcode 错误,似乎没有有效的解决方案/修复(编译器无法在合理的时间内对该表达式进行类型检查)
- python - 为什么 Python Pandas 中的 Read_HTML 不起作用?
- html - 为什么 bootstrap4 的汉堡图标不显示小屏幕的菜单?
- mysql - 如何在 MySQL 中将字符串列作为列表读取?
- php - 下拉列表未访问 WordPress 子目录数据库中的类别项目
- python-3.9 - 尝试导入 pandas_market_calender 时出现 NP_NAT 错误
- python - 如何在我的条形图顶部添加空间?
- sql - Sqlite 按不同计数分组
- terminal - 了解 netsat 命令的输出
- c - Word finder 未按预期输出