React 子组件未呈现（表和行）答案

【问题标题】：React Child Component Not Rendering (Table and Rows)React 子组件未呈现（表和行）
【发布时间】：2026-01-18 14:45:01
【问题描述】：

我正在尝试使用由一个表和多个行组成的复合组件从 API 端点动态加载数据。

Ranking 组件表示表格并放置表格的格式。它的状态包含一个 JSON 用户数组，在调用 componentDidMount 后加载。当状态改变时，表格被重新渲染：renderRows 方法迭代状态数组的 JSON 对象，renderRow 方法创建新行（状态数组中的每个元素一个）。

似乎一切正常，但由于某种原因，Row 组件永远不会加载...

function Row(props) {
    console.log("Rendering row");   --> NEVER PRINTS
    return (
      <TableRow>
        <TableCell> {props.name}</TableCell>
        <TableCell> {props.amount}</TableCell>
        <TableCell> {props.country}</TableCell>
        <TableCell> {props.memo} </TableCell>
      </TableRow>
    );
  }

class Ranking extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []     --> gets populated on ComponentDidMount
    };
  }

  renderRow(user) {
    console.log('calling renderRow on ' + user.username);  -> always prints
    return (
      <Row name={user.username}
          amount={user.amount}
          country={user.country}
          memo={user.memo}
          />
        );
  }

  renderRows(userList) {
    for (var i=0; i<userList.length; i++){
      this.renderRow(userList[i]);
    }
  }

   componentDidMount() {
     fetch("/users").then(response => response.json())
     .then(data => this.setState({users: data}))

   }


  render() {
    console.log(this.state.users)  --> prints expected json array
    return (
      <TableContainer component={Paper}>
        <Table aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell align="right">User</TableCell>
              <TableCell align="right">Amount</TableCell>
              <TableCell align="right">Country</TableCell>
              <TableCell align="right">Memo</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
              {this.renderRows(this.state.users)}    --> is correctly called
          </TableBody>
        </Table>
      </TableContainer>
    );
  }
};

【问题讨论】：

标签： reactjs components react-props

【解决方案1】：

您正在使用 this，它指的是类的属性。您尝试调用的函数在您的班级之外。删除它并调用 renderRows(this.state.users)。

【讨论】：

【解决方案2】：

在 renderRows 函数中你没有返回任何东西。

renderRows(userList) {
    return userList.map(user=>this.renderRow(user))
  }

这可能有效。

【讨论】：

谢谢！我认为在底层函数中有 return 语句就足够了。
不客气。乐意效劳。请标记它已解决。
完成。作为记录，这帮助我理解了两件事： - 你需要有一个 return 语句才能工作 - 我也尝试在我的代码中添加一个 return 语句，但在 for 循环的第一次迭代之后意识到 RETURNS ......保持如果我填充然后返回一个新数组，我的 for 循环将是可能的。