StarWars API行星页面切换按钮实现问题求助

• 核心问题：你只是更新了page参数的变量值，但没有在变量变化时主动触发fetch请求。变量更新不会自动关联异步请求，必须手动绑定触发逻辑。

• 常见修复方案：

  1. 监听page变量变化（框架场景）
     以React为例，将page存入state，通过useEffect监听page的变化，每次变化时重新发起请求：

     const [page, setPage] = useState(1);
     const [planets, setPlanets] = useState([]);
     
     useEffect(() => {
       fetch(`https://swapi.dev/api/planets/?page=${page}`)
         .then(res => res.json())
         .then(data => setPlanets(data.results));
     }, [page]); // 依赖项加入page，page变化时自动执行
     
     // 分页按钮逻辑
     const handlePrev = () => page > 1 && setPage(page - 1);
     const handleNext = () => page < 6 && setPage(page + 1);
     

     Vue场景可使用watch监听page变量，触发请求函数。

  2. 点击按钮时直接触发请求（原生JS场景）
     如果不用框架，可在按钮点击事件中，更新page后立即调用fetch函数：

     let currentPage = 1;
     const fetchPlanets = (pageNum) => {
       fetch(`https://swapi.dev/api/planets/?page=${pageNum}`)
         .then(res => res.json())
         .then(data => {
           // 处理并渲染行星数据
           console.log(data.results);
         });
     };
     
     // 初始加载第一页
     fetchPlanets(currentPage);
     
     // 绑定上一页按钮事件
     document.getElementById('prev-btn').addEventListener('click', () => {
       if (currentPage > 1) {
         currentPage--;
         fetchPlanets(currentPage);
       }
     });
     
     // 绑定下一页按钮事件
     document.getElementById('next-btn').addEventListener('click', () => {
       if (currentPage < 6) {
         currentPage++;
         fetchPlanets(currentPage);
       }
     });
     

  3. 检查URL参数拼写
     确认page参数正确拼接到URL中，避免出现?p=${page}这类拼写错误，必须是?page=${page}。

• 关键提示：变量值更新和异步请求没有自动关联，无论用哪种方式，都要保证page变化后，fetch函数被重新调用一次。

内容的提问来源于stack exchange，提问作者Egisto1987