React似乎在渲染所有元素，但只显示第一个

Question

我有一个组件：

const StudentName = (student) => (
<div key={student.engName} test={console.log("Name: "+student.val().engName)}>
<Typography
className={ student==currentStudent ? 'selectedStudentName' : 'unselectedStudentName' }>
{student ? student.engName : null}'s Homework</Typography>
</div>
)

我用渲染

return ( 
<div>
{ students ? students.map((student) => StudentName(student)) : null}
</div>
);

"学生"处于useState状态，因此应用程序应在每次更新时呈现(学生从firebase中检索并添加(

我正在与3名学生进行测试。当我得到输出时，我可以看到他们两个都在制作StudentName元素：

//Name: David
//Name: Michelle
//Name: Sunny

但是，仅显示David的单个StudentName元素。当我检查页面上的元素时，这也是唯一一个。但在我的应用程序中，我点击另一个页面，然后点击返回，三个StudentNames都会显示出来。只是最初没有。这对我来说毫无意义。任何帮助都将不胜感激！

Answer 1

试试这个：

return ( 
<div>
{ students && students.map((student, indx) => <React.Fragment key={indx}> 
{StudentName(student)}
</React.Fragment> })
</div>
);