Question

我正在尝试构建一个简单的React应用程序。我有一个页面，其中包含我目前正在尝试使用虚假数据进行渲染的表格。我可以成功导航到并呈现页面，但是当我这样做时，只显示标题，而没有显示数据的行。这是我现在的代码：

import React from 'react';

const Campus = (props) => {

  const campus = {
      name: 'Terra',
      students: ['katie', 'lara'],
      instructors: ['joe', 'bob']
  }

  return (
    <table className='table'>
      <thead>
        <tr>
          <th>Students</th>
        </tr>
      </thead>
      <tbody>
        { console.log("students ", campus.students) }
         { campus.students && campus.students.map((student, idx) => {
            <tr key={idx} >
              <td>
              {console.log('student is ', student)}
                {student}
              </td>
            </tr>
         })
        }
      </tbody>
    </table>
  );
}

export default Campus;

我可以安慰学生们#log;在地图内部命名，但是当页面加载时，只显示标题。我很可能错过了一些非常明显的东西;我是新手。

Answer 1

更改

<tr key={idx} >

的

return <tr key={idx} >

表行和数据不会在React文档的JSX表中显示

1 个答案: