Реагировать дочерний компонент не рендеринга (таблица и строки) - PullRequest
Новая
       32

Реагировать дочерний компонент не рендеринга (таблица и строки)

0 голосов
/ 25 апреля 2020

Я пытаюсь использовать составной компонент, состоящий из одной таблицы и нескольких строк, для динамической загрузки данных из конечной точки API.

Компонент «Ранжирование» представляет таблицу и определяет формат таблицы. Его состояние содержит массив 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>
    );
  }
};

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

В функции renderRows вы ничего не возвращаете. 

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

Это может работать.

0 голосов
/ 25 апреля 2020

Вы используете это, что относится к свойству класса. Функция, которую вы пытаетесь вызвать, находится за пределами вашего класса. Удалите это и просто вызовите renderRows (this.state.users).

...