React js使用JSON响应呈现功能性html

Question

我已经创建了像]这样的下拉组件>

  const CONTACTS_LIST = () => (

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

  );
是否可以使用json响应呈现html？我可以使用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>
        )

        )
    );
请提出建议

我已经创建了const CONTACTS_LIST =（）=>之类的下拉组件（{{list_data && list_data .map（（h，i）=>（

Answer 1

如果使用的是react 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>
  );
}

Answer 2

在then块中具有html代码会破坏React的目的。