如何使用 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>
  );
}