在 React.js 中访问 JSON 头像

Question

我正在尝试连续创建 10 个头像来显示用户列表。但是，当我通过 JSON 来检查这些时，我得到了重复的头像并且歪曲了头像的首字母。我已经在下面附加的代码沙箱中尝试了这个。

https://codesandbox.io/s/optimistic-cookies-ygvso?file=/src/App.js

Answer 1

export default function App() {
      return (
        <div>
          <div>
            <Typography variant="h5">Persons</Typography>
          </div>
          <Stack direction="row" spacing={2}>
          {PersonData.map((person) => {
            return (
           
                <div>
                  <Avatar {...stringAvatar(person.avatar)} />
                  <Typography>{person.name}</Typography>
                </div>  
            );
          })}
             </Stack>
        </div>
      );
    }