未渲染反应子组件（表和行）

Question

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

[Ranking]组件代表表格，并奠定表格的格式。它的状态包含一个用户的JSON数组，该数组在调用componentDidMount后得到加载。当状态更改时，表将重新呈现：renderRows方法遍历状态数组的JSON对象，并且renderRow方法创建新的Rows（状态数组中的每个元素一个）。

一切似乎都可以正常工作，但是由于某些原因，行组件永远不会加载...

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>
    );
  }
};

Answer 1

您正在使用它，它指的是类的属性。删除它，然后调用renderRows（this.state.users）。