reactjs - 如何在reactjs中将数组显示为Jsx元素

Question

有这个用户数组，其中存储在照片中的用户名是从照片数组中拆分出来的，我想在显示按钮时显示数组结果。代码片段如下

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>
)

Answer 1

当心，

users.push(setUserNames)是可变的，并且不遵守 React 中数据更改的方式。您需要更改userusinguseState和 spread 运算符。

此外，我建议您在单独的函数中构建所有数组并返回一个user数组，然后使用useState.

然后开始使用JSX

像这样的东西。

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

    )
}