React 在选项中显示获取的数据答案

【问题标题】：React Showing Fetched Data in OptionReact 在选项中显示获取的数据
【发布时间】：2021-07-02 07:23:48
【问题描述】：

我正在尝试使用 api 来获取我正在使用 fetch 的国家/地区列表，在获得列表后我需要在 UI 中将国家/地区列表显示为选项，目前我能够将其打印到控制台但在选项上它没有反映请检查我做错了什么以及如何解决，

const [contry, setcontry] = useState([])
useEffect(() => {
  const urlp = "https://covid19.mathdro.id/api/countries";
  fetch(urlp)
    .then(response => {
      if (response.status === 200) {
        return response.json();
      } else {
        throw new Error('Something went wrong on api server!');
      }
    })
    .then(data => {
      // console.log(data.countries)
      const lp = data.countries
      //   console.log(lp);
      setcontry(lp)




    }).catch(error => {
      console.error(error);
    });
}, [])

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>Global</option>
    <option>Global1</option>

    {contry.map((x) => { console.log(x.name);
    <option value={x.name}>{x.name}</option>



    })}

【问题讨论】：

你不是 returning 来自 .map() 回调的
omg 没注意到，谢谢你要把我的头发拉出来
这是一个常见的错误。在进行故障排除时，会添加 console.log() 以测试内容。没有意识到这会破坏隐含的return。每当您向箭头函数添加另一个语句时，请始终添加 return 关键字。

标签： javascript reactjs react-hooks

【解决方案1】：

您的代码中的主要问题是您没有从 contry.map 函数返回任何内容。

所以，通过更改您的代码

来自

{contry.map((x) => { console.log(x.name);
    <option value={x.name}>{x.name}</option>
})}

到

{contry.map((x) => { 
   console.log(x.name);
   return <option key={x.name} value={x.name}>{x.name}</option>
})}

会起作用的。

const { useState, useEffect } = React;

const App = () => {
  const [contry, setcontry] = useState([])
  useEffect(() => {
    const urlp = "https://covid19.mathdro.id/api/countries";
    fetch(urlp)
      .then(response => {
        if (response.status === 200) {
          return response.json();
        } else {
          throw new Error('Something went wrong on api server!');
        }
      })
      .then(data => {
        // console.log(data.countries)
        const lp = data.countries
        //   console.log(lp);
        setcontry(lp);
      }).catch(error => {
        console.error(error);
      });
  }, [])


  return (
    <div class="form-group">
      <label for="sel1">Select list:</label>
      <select class="form-control" id="sel1">
        <option>Global</option>
        <option>Global1</option>
        {contry.map((x) => { 
          console.log(x.name);
          return <option key={x.name} value={x.name}>{x.name}</option>
        })}
      </select>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

<div id="react"></div>

【讨论】：