时间戳

首页 > 解决方案 > React 在选项中显示获取的数据

javascript - React 在选项中显示获取的数据

问题描述

我正在尝试使用 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>



    })}

标签： javascriptreactjsreact-hooks

解决方案

代码中的主要问题是您没有从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>

推荐阅读