Как вернуть HTML в ReactJS?

Question

[sharkdest]

Здравствуйте, помогите, пожалуйста, решить проблему.
Компонент Реакт:

import React from "react";
import ReactTable from "react-table";
import matchSorter from 'match-sorter'

export default class Orders extends React.Component {
...
test = (row) => {
    let data = {orderKey: row.orderKey};
    if (this.state.startDate !== "") {
      data['from'] = this.state.startDate.toISOString()
    }
    if (this.state.endDate !== "") {
      data['to'] = this.state.endDate.toISOString()
    }

    axios.get("API", {
      params: data
    })
    .then(res => {
///////////Здесь я сделал таблицу, которую хочу вернуть в функции <b>test()</b>////////////
                           <table class="table">
                              <thead>
                                <tr>
                                  <th scope="col">First</th>
                                  <th scope="col">Last</th>
                                </tr>
                              </thead>
                              <tbody>
                                { res.data.map(trade =>
                                  <tr key={trade.id}>
                                    <td>{trade.first}</td>
                                    <td>{trade.last}</td>
                                  </tr>
                                )}
                              </tbody>
                            </table>
     })
    .catch(function (error) {
      console.log(error);
    })
///////////////////Здесь хочу вернуть таблицу////////////////
    return таблица
   }
...
render() {
    const columns = [{
                  expander: true,
                  Header: () => <strong>More</strong>,
                  width: 65,
                  Expander: ({ isExpanded, ...rest }) =>
                    <div>
                      {isExpanded
                        ? <span>&#x2299;</span>
                        : <span>&#x2295;</span>}
                    </div>,
                  style: {
                    cursor: "pointer",
                    fontSize: 25,
                    padding: "0",
                    textAlign: "center",
                    userSelect: "none"
                  }
              }, {
              Header: 'Instrument',
              accessor: 'instrument'
            }, {
              Header: 'Client Id',
              accessor: 'clientId'
            }]
return (
           <ReactTable
             data={this.state.rows}
             filterable
             defaultFilterMethod={(filter, row) => String(row[filter.id]) === filter.value}
             columns={columns}
             defaultPageSize={5}
             className="-striped -highlight"
             SubComponent={({ row }) => this.test(row)}
           />
  )
 }
}

Для наглядного примера:
Есть главная таблица, в каждой строке которой есть возможность нажать кнопку (+), за результат ответа от нажатия кнопки отвечает Пропс SubComponent.


Как грамотно сделать так, что бы функция test() возвращала HTML после ответа от axios запроса?
Заранее ОГРОМНОЕ спасибо.

Answer 1

[Антон Спирин]

Вам следует понять три вещи:
1. Как работает асинхронный код.
2. Почему нельзя делать асинхронные вызовы в методе render.
3. Что JSX(React.createElement) не возвращает html.

В вашем случае загрузка данных должна происходить за пределами кода компонента и инициироваться например в componentDidMount или по клику. А компонент должен получать данные из state.

Comments

[sharkdest]

2. Моих знаний не хватает, что бы решить эту проблему по другому :(
Функция и так выполняеться по клику.
Есть таблица:

При нажатии кнопки (+) открывается строка, и в ней должен быть ответ с axios запроса, для этого запроса нужно передать значение на какую именно строчку кликнул пользователь.

Может подскажете, как мне это реализовать?