React Semantic UI调用renderRow无输出，请求协助排查问题

让我帮你一步步拆解这个问题，常见的几个原因如下：

1. 你可能没在render里实际调用renderRow方法 #

从你贴出的render代码片段来看，最后是<l...，大概率是代码没写完。最容易犯的错误就是：你在<Body>标签里没插入{this.renderRow()}，正确的结构应该类似这样：

render(){
  const { Header, Row, HeaderCell, Body } = Table;
  return (
    <Layout>
      <h3>Registered Accounts</h3>
      <Table>
        <Header>
          <Row>
            <HeaderCell>Address</HeaderCell>
            <HeaderCell>Payment Info</HeaderCell>
          </Row>
        </Header>
        <Body>
          {this.renderRow()} {/* 这里必须调用你的renderRow方法才会输出内容！ */}
        </Body>
      </Table>
    </Layout>
  )
}

如果没主动调用这个方法，React自然不会渲染它返回的内容。

2. registeredAccounts 是空数组或未正确传递 #

先确认this.props.registeredAccounts的实际值：

• 是不是父组件还没把数据传过来？比如异步请求还在pending状态，初始值是空数组？
• 可以在renderRow里加一行console.log(this.props.registeredAccounts)，看看控制台输出的是不是你预期的数组。

如果数组是空的，map函数不会生成任何<Row>元素，页面上自然看不到内容。

3. renderRow的this指向问题（类组件场景） #

如果这是个类组件，你的renderRow如果是普通函数定义（不是箭头函数），会导致this指向错误，拿不到this.props里的内容。

解决方法是把renderRow改成箭头函数定义：

renderRow = () => {
  const { Row, Cell } = Table;
  return this.props.registeredAccounts.map(address => {
    return (
      <Row key={address}> {/* 别忘了给循环元素加key，这是React的强制要求 */}
        <Cell>{address}</Cell>
        <Cell>minimum payment</Cell>
      </Row>
    )
  })
}

另外，给循环生成的<Row>加key也很重要，避免控制台出现警告，同时保证React正确更新列表。

4. Table组件的结构是否符合要求 #

不同UI组件库的Table对结构有严格要求，比如有些必须把<Row>放在<Body>内部，或者<Cell>的使用方式有特定规则。你可以对照所用组件库的官方文档，确认你的结构是否完全符合要求。

先从这几个点排查，应该能快速定位问题！

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