Javascript 如何在React中刷新映射表？

我正在从React状态中存储的映射元素呈现一个表。但是，tr行元素不会呈现在tbody组件中，即使控制台命令显示数据在那里。从

this.state.tableData

呈现表行的代码是：

componentWillMount() {
    let data = this.props.dbPersons.get("directory");
    this.setState({ tableData: data });         
}

...

renderTableData() {
    return this.state.tableData.map((student, index) => {
      const { id, person } = student; 
      console.log("id'", id);
      console.log("person.lastName", person.lastName);

      return (
        <tr key={index}>
          <td>{id}</td>
          <td>{person.lastName}</td>
        </tr>
      )
    })
}

componentWillMount（）{
让data=this.props.dbPersons.get（“目录”）；
this.setState（{tableData:data}）；
}
...
renderTableData（）{
返回this.state.tableData.map（（学生，索引）=>{
const{id，person}=学生；
console.log（“id'”，id）；
日志（“person.lastName”，person.lastName）；
返回(
{id}
{person.lastName}
)
})
}

如果tableData存储在以下状态，则渲染tbody：

{this.state.tableData && <tbody>
  {this.renderTableData()}
</tbody>}

{this.state.tableData&&
{this.renderTableData（）}
}

但是，当页面打开时，控制台显示行数据，但是t正文不显示任何行。为什么？组件是否需要以某种方式刷新？tbody组件是否已呈现且无法更新？

renderabledata（）{
renderTableData() {
  var data = this.state.tableData.map((student, index) => {
    const { id, person } = student; console.log("id'", id);
    console.log("person.lastName", person.lastName);
    return (<tr key={index}>
      <td>{id}</td>
      <td>{person.lastName}</td>
    </tr>)
  })
  return data;
}

var data=this.state.tableData.map（（学生，索引）=>{
const{id，person}=student；console.log（“id'，id”）；
日志（“person.lastName”，person.lastName）；
返回(
{id}
{person.lastName}
)
})
返回数据；
}

除了componentWillMount会引起警告（用ComponentDidMount替换）到目前为止，您发布的代码没有任何问题。我看不出它会记录但不会渲染的原因。下面是代码的一个工作示例：

类应用程序扩展了React.Component{
状态={tableData:false}；
组件willmount（）{
设置超时(
() =>
这是我的国家({
tableData:[{id:1}，{id:2}]，
}),
500
);
}
renderTableData（）{
返回this.state.tableData.map（（学生，索引）=>{
const{id}=学生；
console.log（'id'，id）；
返回(
{id}
{/*{name}已删除此项，但仍可以看到id*/}
);
});
}
render（）{
返回(
{this.state.tableData&&(
{this.renderTableData（）}
)}
);
}
}
ReactDOM.render（，document.getElementById（'root'））

Other然后搞乱代码对齐这应该做什么？只回答代码，没有解释或支持文档是不可取的。知识和学习资源也是如此。竞争性的、自成体系的答案，引导读者在何时/为什么他们的解决方案解决OP问题时进行推理，具有更长远的价值，倾斜问答以突出知识，而不是给我代码编码服务类型的问题，并帮助未来的访问者将您的答案应用于他们自己的问题。最后，经过深思熟虑、完整的答案和解释更有可能被提升，因为它们对访问者的帮助最大。请考虑编辑增加长期价值。SherylHohman谢谢你的建议，我同意你的意见。