如何使用 React 創建僅顯示 API 列表的選定編號的下拉列表

Question

我試圖創建一個下拉列表，顯示 API 的一些列表，具體取決於您在下拉列表中選擇的數字。

例如，如果在下拉列表中選擇了選項 30，那么它將顯示 1-30 的 30 列表。 如果我將選項更改為 50，它將顯示 1-50。 我怎樣才能做到這一點？

編碼：

const [data, setData] = useState([]);
  const [id, setId]= useState('');
  const [index, setIndex] = useState(10)
  

useEffect(() => {
  const loadData = async () => {
    await fetch(`https://swapi.dev/api/people/${id}/`)
    .then((response) => response.json())
    .then((ReceivedData) => setData(ReceivedData));
    }
loadData()
},[id]);
   
return(
 <select>
<option selected >10</option>
<option selected >50</option>
<option selected >60</option>
 </select> 
{data.map((datas,index){
        <table className="table">
     <tbody>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Height</th>
        <th scope="col">Mass</th>
        <th scope="col">Hair Color</th>
        <th scope="col">Eye Color</th>
      </tr>
    </thead>
    <tr key={index}>
        <th scope="row">{datas.name}</th>
        <td>{datas.height}</td>
        <td>{datas.mass}</td>
        <td>{datas.hair_color}</td>
        <td>{datas.eye_color}</td>
      </tr>
    </tbody>
  </table>)}
)

Answer 1

您提供的 API 已實現分頁。 因此，您可以查詢它幾次以獲得所需數量的結果。 對於 50 調用 5 次，同時增加頁面參數。 每個請求每個請求提供 10 個人。

function App() {
  const [data, setData] = React.useState([]);
  const [id, setId] = React.useState("10");
  const [index, setIndex] = React.useState(10);

  React.useEffect(() => {
    const loadData = async () => {
      const requests = Array.from({ length: parseInt(id) / 10 }, (_, i) =>
        fetch(`https://swapi.dev/api/people/?page=${i + 1}`)
      );
      const responses = await Promise.all(requests);
      const promises = responses.map((response) => response.json());
      const output = await Promise.all(promises);
      setData(output.map((o) => o.results)?.flatMap((arr) => arr));
    };
    loadData();
  }, [id]);

  return (
    <div>
      <select onChange={(e) => setId(e.target.value)}>
        <option selected>10</option>
        <option selected>50</option>
        <option selected>60</option>
      </select>
      {data.map((datas, index) => (
        <table className="table">
          <tbody>
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Height</th>
                <th scope="col">Mass</th>
                <th scope="col">Hair Color</th>
                <th scope="col">Eye Color</th>
              </tr>
            </thead>
            <tr key={index}>
              <th scope="row">{datas.name}</th>
              <td>{datas.height}</td>
              <td>{datas.mass}</td>
              <td>{datas.hair_color}</td>
              <td>{datas.eye_color}</td>
            </tr>
          </tbody>
        </table>
      ))}
    </div>
  );
}