封装的Table_Row放入TableBody后无渲染，控制台打印success数据存在如何解决

问题原因 #

1. 核心问题：create_Row 方法没有返回 map 遍历生成的JSX数组。你仅执行了content.map(...)逻辑，但没有将map的结果作为方法返回值，整个方法默认返回undefined，因此TableBody没有内容可渲染，哪怕控制台能正常打印success也不会显示行。
2. 空状态逻辑位置错误：你将Board_list_length <=0的空数据分支写在map的遍历回调中，如果传入的content本身是空数组，map不会执行任何回调逻辑，else分支的空数据行永远不会被渲染。
3. 潜在的this指向风险：你用箭头函数定义create_Row方法，若该对象定义在类组件外部，this不会指向组件实例，会直接报错，当前能打印success只能说明你暂时把对象写在了this指向正确的作用域内。

解决方法 #

第一步：修正create_Row逻辑 #

补充return语句，将空状态判断提到map外层，同时把依赖的组件方法/state作为参数传入，避免this指向问题：

const Table_Row = {
  create_Row: (content, boardListLength, handleOpen, caculate_date) => {
    // 先判断是否为空数据，提前返回空状态行
    if (boardListLength <= 0) {
      return (
        <TableRow hover className="TableRow" key="0">
          <TableCell className="TableCell" width='10%' align="center">adssd</TableCell>
          <TableCell className="TableCell" width='20%' align="center">das</TableCell>
          <TableCell className="TableCell" width='30%' align="center">adsd</TableCell>
          <TableCell className="TableCell" width='15%' align="center">ads</TableCell>
          <TableCell className="TableCell" width='15%' align="center">asdsd</TableCell>
          <TableCell className="TableCell" width='10%' align="center">asd</TableCell>
        </TableRow>
      );
    }
    // 必须return map生成的JSX数组
    return content.map((list) => {
      console.log('success');
      return (
        <TableRow className="TableRow" key={list.idx} onClick={() => handleOpen(list.idx)}>
          <TableCell className="TableCell" width='10%' align="center">{list.rownum}</TableCell>
          <TableCell className="TableCell" width='20%' align="center">{list.title}</TableCell>
          <TableCell className="TableCell" width='30%' align="center">{list.content}</TableCell>
          <TableCell className="TableCell" width='15%' align="center">{list.writer}</TableCell>
          <TableCell className="TableCell" width='15%' align="center">{caculate_date(list.upd_date)}</TableCell>
          <TableCell className="TableCell" width='10%' align="center">{list.hit}</TableCell>
        </TableRow>
      );
    });
  }
}

第二步：修正调用方式 #

调用时传入所有依赖的参数即可：

<TableBody>
{
  Table_Row.create_Row(
    this.state.Board_rows_per_page > 0
      ? this.state.Board_List.slice(this.state.Board_page * this.state.Board_rows_per_page, this.state.Board_page * this.state.Board_rows_per_page + this.state.Board_rows_per_page)
      : this.state.Board_List,
    this.state.Board_list_length,
    this.handleOpen,
    this.caculate_date
  )
}
</TableBody>

关于封装写法的同步问题说明 #

你将渲染逻辑封装为对象变量调用的写法不会导致返回值无法随state同步。只要state更新触发组件重渲染，return语句中的Table_Row.create_Row就会被重新执行，传入最新的state值生成最新的JSX，和直接把逻辑写在return语句中的效果完全一致。

内容的提问来源于stack exchange，提问作者user11019920