Как вывести данные API в таблицу?

Question

[paketik0chaya]

Здравствуйте. Тут проблема: нужно вывести данные апишки в таблицу через Ajax-запрос. Консоль выдает "Warning: validateDOMNesting(...):

<div className="tab-pane" id="tab2">
                            <table id="district" className="adress">
                                <thead>
                                    <tr>
                                        <th>Район</th>
                                    </tr>
                                </thead>
                                <tbody>
                                     <tr>
                                         <td></td>
                                     </tr>
                                </tbody>
                            </table>
                        </div>

Код Ajax:

district(){

        let url = "http://192.168.1.155/district";

        $.ajax
        ({
            type: "GET",
            url: url,
            dataType: 'json',
            success: function(data)
                {
                    data.forEach(function (district) {
                        $("#district").append(
                            "<div class='tab-pane' id='tab2'>" +
                            "<table id='district' class='adress'>" +
                            "<thead>" +
                            "<tr>" +
                            "<th>Район" + "</th>" +
                            "</tr>" +
                            "</thead>" +
                            "<tbody>" +
                            "<tr>" +
                            "<td>" + district.name + "</td>" +
                            "</tr>" +
                            "</tbody>" +
                            "</table>" +
                            "</div>"
                        )

                    })
                        },
       });
   }

Answer 1

[Максим]

Не надо с DOM напрямую работать.
Создаете в state переменную: data
Далее в componentDidMount выполняете ajax запрос и его результат записываете через this.setState({data ... })
В render методе своего компонента, в таблице делаете обход по this.state.data с помощью map / forEach / тд

Пример:

...
constructor(props) {
    super(props)
    this.state = {
      data: []
    }
}
...
componentDidMount() {
    // ваш ajax запрос
    // в success коллбэке устанавливаете новый state, из-за этого произойдет ре-рендер
    success: function(data) { this.setState(data) }
}
render() {
const { data } = this.state
...
    <table className='table table-bordered table-striped'>
        <thead>
          <tr>
            <th>name</th>
          </tr>
        </thead>
        <tbody>
          {
            data.map(item => {
              return (
                <tr key={item._id}>
                  <td>{item.name}</td>
                </tr>
              )
            })
          }
        </tbody>
      </table>
...
}