Material-UI. Table

331
18 мая 2018, 08:50

Для отрисовки на клиенте данных я пользуюсь material-ui, а именно Table.

class RatingTable extends React.Component {
constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this); 
}
handleChange() {
    let i = 1;
    const { data } = this.state;
    return data.map(element => {
        return (
            <TableRow>
                <TableRowColumn>{i++}</TableRowColumn>
                <TableRowColumn>{element['user.login']}</TableRowColumn>
                <TableRowColumn>{element['hardWins']}</TableRowColumn>
            </TableRow>
        );
    })
}
render() {
    return (
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHeaderColumn>Position</TableHeaderColumn>
                    <TableHeaderColumn>Login</TableHeaderColumn>
                    <TableHeaderColumn>Rating</TableHeaderColumn>
                </TableRow>
            </TableHeader>
            <TableBody>
                {this.handleChange()}
            </TableBody>
        </Table>);
}

}

Вопрос таков: как принять данные с сервера, чтобы потом занести их в таблицу (для данного примера вопрос звучит так: как мне в this.state.data занести данные,полученные с сервера )? Для отправки запроса использую axios.

Answer 1

Если необходимо при загрузке компонента сделать запрос к серверу, то поместите эту функцию в componentDidMount()

axios.get('/your-path')
  .then(response => {
    this.setState({ data: response })
  })
  .catch(function (error) {
    console.log(error);
  });

P.S: у функции map есть второй аргумент - индекс (вместо вашего созданного i счетчика)

return data.map((element, index) => {
    ...
}
READ ALSO
Интеграция p5 с React компонентом

Интеграция p5 с React компонентом

Пишу react приложение и нужно интегрировать p5 с reactесть кнопка которая включает p5

252
Как отфильтровать значения Map() в JS?

Как отфильтровать значения Map() в JS?

У меня есть Map(), как я могу проверить эту коллекцию, содержит ли она в себе элемент корорый содержит определенный символ? Если другими словами,...

265
Проблема с флагами js

Проблема с флагами js

Есть разметка, в которой по очереди меняются предметыСперва записывается в item1, затем в item0, потом опять в item1 и так далее

243