如何在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更改useState并扩展运算符。

此外，我建议您在单独的函数中完成所有数组的构建，并返回一个user数组，然后使用useState将该数组设置为某种状态。

然后开始使用JSX

构建UI

类似这样的东西。

const SomeCom = (props) => {
    const [users,setUsers] = useState(buildUserArray(props.photos))
    return (
        users.map(() => {
            // Render your JSX
        })

    )
}