如何在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>
)

let用户：字符串[]=[]；
const setUserNames=photo.filepath.split（“”）[1]；
push（setUserNames）；
log（`Name->`，users）；
返回(
{users.map（（用户，索引）=>(
{用户}
))}
)

小心

users.push（setUserNames）

是可变的，不遵循React中更改数据的方式。您需要使用

useState

和spread运算符更改

user

此外，我建议您在单独的函数中构建所有数组，并返回一个

user

数组，然后使用

useState

将该数组设置为某种状态

然后开始使用

JSX

像这样的

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

    )
}
 

---

console.log（用户）

行打印什么？如果您能提供更多信息，了解您正在努力实现的目标，将非常有帮助。：）现在还不清楚你想做什么，而你还没有做。但是在用户数组中只有一个用户，因此只有一个按钮，因为您只在索引[1]处按元素。如果文件名中有多个用户名，则需要将它们全部添加到用户数组中。Console.log（users）在数组中打印该用户名。函数buildUserArray如何创建？