Реагируйте на визуализацию js и ответ json

Question

Я создал выпадающий компонент, такой как

  const CONTACTS_LIST = () => (

    <select>
    {
    list_data &&
    list_data .map((h, i) => 
    (
    <option key={i} value={h.list_id}>{h.name}</option>))
    }
    </select>

  );

. Можно ли отобразить html с ответом json следующим образом? я могу установить ответ в константах, используя setstate. но просто хотел знать, что это тоже возможно?

    const CONTACTS_LIST = () => (

      fetch(URL)
      .then(response => response.json())
      .then(json => {
      (
        render '
        (   <select>
        {
        json &&
        json.map((h, i) => 
        (
        <option key={i} value={h.list_id}>{h.name}</option>))
        }
        </select>
        )

        )
    );

пожалуйста, предложите

Answer 1

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

class MyComponent{
  constructor () {
    super();

    this.state = {
      list_data: []
    };
  }

  componentDidMount () {
    const URL = "";
    fetch(URL).then(response => response.json())
      .then(json => {
        this.setState({
          list_data: json
        });
      });
  }

  render () {
    return (
      <select>
        {
          list_data.length === 0
            ? <option value="">Waiting moment</option>
            : list_data.map(({ h, i }) => (
              <option key={i} value={h.list_id}>{h.name}</option>
            ))
        }
      </select>
    )
  }
}

Если вы используете реагирование 16, вы можете использовать Hooks, useState и useEffect, попробуйте это так

import React, { useEffect, useState } from 'react';

function myComponent () {
  const [list_data, set_list_data] = useState([]);

  useEffect(() => {
    const URL = "";
    fetch(URL).then(response => response.json())
      .then(json => {
        set_list_data(json);
      });
  }, []);

  return (
    <select>
      {
          list_data.length === 0
            ? <option value="">Waiting moment</option>
            : list_data.map(({ h, i }) => (
              <option key={i} value={h.list_id}>{h.name}</option>
            ))
        }
    </select>
  );
}

Hook особенность реагировать

Answer 2

Вы можете передать ответ json в качестве реквизита для компонента, который будет отображаться.

fetch(URL)
      .then(response => response.json())
      .then(
          <Component data={response} />
      )

Наличие HTML-кода в блоке then отрицательно сказывается на цели React.