NextJS应用中滑块组件点击下一页按钮无法切换页面，Return函数仅执行一次的问题求助

嘿，我来帮你理清楚这个问题～首先得明确一个React核心规则：props是只读的，你直接修改props.currentPage的行为是不符合React单向数据流逻辑的——这种修改不仅不会触发组件重新渲染，还可能导致不可预测的状态混乱。因为组件的重渲染依赖于state或props的引用变更，你只是修改了props对象的内部属性，并没有改变父组件传递过来的props本身的引用，所以React根本感知不到这个变化，自然不会重新执行render函数。

下面给你两种可行的修改方案，你可以根据业务场景选择：

方案一：组件内部管理分页状态 #

如果分页逻辑只需要在ResiliationSlider内部处理，不需要父组件干预，那直接用组件自身的useState来管理当前页面状态就好：

import React, { useState } from 'react';
import ResiliationForm from './ResiliationForm';
import ResiliationUserData from './ResiliationUserData';

const slidePages = [
  {"id": 0, "page": "resiliationForm"},
  {"id": 1, "page": "resiliationUserDate"},
  {"id": 2, "page": "resiliationReview"},
]

const ResiliationSlider = ({ data }) => {
  // 用useState初始化当前页面
  const [currentPage, setCurrentPage] = useState(slidePages[0]);

  const onNextClicked = () => {
    // 加个边界判断，避免超出最后一页
    if (currentPage.id < slidePages.length - 1) {
      setCurrentPage(slidePages[currentPage.id + 1]);
    }
  }

  return (
    <div>
      {currentPage.id === 0 && <ResiliationForm key={currentPage.id} data={data} onNextClicked={onNextClicked}/>}
      {currentPage.id === 1 && <ResiliationUserData key={currentPage.id} data={data} onNextClicked={onNextClicked}/>}
      {/* 补上第三页的渲染逻辑 */}
      {currentPage.id === 2 && <div>这里是resiliationReview组件</div>}
    </div>
  )
}

export default ResiliationSlider;

方案二：父组件管理分页状态 #

如果currentPage的状态需要被父组件控制（比如父组件要根据分页状态做其他业务逻辑），那应该由父组件负责状态管理，子组件只负责触发状态更新的回调：

父组件示例： #

import ResiliationSlider from './ResiliationSlider';
import { useState } from 'react';

// 注意要把slidePages也放在父组件或者公共文件里
const slidePages = [
  {"id": 0, "page": "resiliationForm"},
  {"id": 1, "page": "resiliationUserDate"},
  {"id": 2, "page": "resiliationReview"},
]

const ParentComponent = () => {
  const [currentPage, setCurrentPage] = useState(slidePages[0]);
  const yourData = {/* 你的业务数据 */};

  const handlePageChange = (nextPageId) => {
    if (nextPageId < slidePages.length) {
      setCurrentPage(slidePages[nextPageId]);
    }
  }

  return <ResiliationSlider currentPage={currentPage} onPageChange={handlePageChange} data={yourData} />
}

修改后的ResiliationSlider： #

import React from 'react';
import ResiliationForm from './ResiliationForm';
import ResiliationUserData from './ResiliationUserData';

const ResiliationSlider = ({ currentPage, onPageChange, data }) => {
  const onNextClicked = () => {
    onPageChange(currentPage.id + 1);
  }

  return (
    <div>
      {currentPage.id === 0 && <ResiliationForm key={currentPage.id} data={data} onNextClicked={onNextClicked}/>}
      {currentPage.id === 1 && <ResiliationUserData key={currentPage.id} data={data} onNextClicked={onNextClicked}/>}
      {currentPage.id === 2 && <div>这里是resiliationReview组件</div>}
    </div>
  )
}

export default ResiliationSlider;

这两种方案都是通过React的官方状态管理机制（useState）来触发组件重渲染，从而实现页面切换的效果，完全符合React的设计规范。

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