集成react-id-swiper时出现Maximum call stack size exceeded错误的原因及解决方法

首先，先给你解释下这个错误：Maximum call stack size exceeded 意思是调用栈被撑爆了，通常是代码里出现了无限循环、重复触发渲染的逻辑，或者库的方法被重复调用导致内部陷入死循环。

接下来看你的代码，我找到了几个关键问题，一个个给你说怎么修：

1. 最核心的问题：Swiper插件重复注册导致无限循环 #

你在render()方法里写了SwiperCore.use([Autoplay, Navigation]);——这可是个大坑！render函数会在组件每次状态更新、props变化时反复执行，每次调用SwiperCore.use都会重新注册一遍插件，这会触发react-id-swiper内部的重复初始化逻辑，最后就把调用栈给撑爆了。

怎么改：把插件注册的代码移到组件外面，只执行一次就行，比如放在import语句后面：

// 先导入需要的模块
import SwiperCore, { Autoplay, Navigation } from 'swiper';
// 在这里注册插件，只执行一次
SwiperCore.use([Autoplay, Navigation]);

class Slide extends Component {
  // ... 你的其他代码
  render() {
    // 把这里的SwiperCore.use删掉！
    const { data, error, loading, next } = this.state;
    // ... 剩下的render逻辑不变
  }
}

2. 状态变量拼写错了，导致加载状态和数据渲染异常 #

我扫了一眼你的代码，发现状态变量的拼写乱了：

• 构造函数里定义的是load: false
• componentDidMount里设的是loading: true
• 接口请求成功后又写成了loding: false（少打了个a）
• 渲染时又去判断this.state.load

这就导致加载状态永远无法正确更新，数据回来后状态也没同步，轮播自然显示不出来。

怎么改：统一用loading这个变量名，把所有拼写错误都修正：

constructor(props) {
  super(props);
  // 把load改成loading
  this.state = { data: [], loading: false, next: "", error: null };
}

componentDidMount() {
  this.setState({ loading: true });
  const token = getTokenu();
  Axios.get(ApiUrlConstant.getApiFullUrl("slide"), {
    headers: { Authorization: "Token " + token }
  })
    .then(res => {
      console.log(res.data.results);
      // 把loding改成loading
      this.setState({ data: res.data.results, loading: false });
    })
    .catch(error => {
      this.setState({ error: error, loading: false });
    });
}

render() {
  // 解构loading，而不是load
  const { data, error, loading, next } = this.state;
  // ... 其他逻辑
  // 判断loading，而不是this.state.load
  {loading ? (
    <div id="slide-load" style={{ marginTop: "100px", marginBottom: "30px", width: "100%", display: "flex", justifyContent: "center" }} >
      <ClipLoader size={30} color="#f3990f" />
    </div>
  ) : null}
}

3. 小细节优化（可选但建议做） #

• 你的<Link>标签to属性是空字符串，点击会刷新当前页面，建议改成实际的跳转路径，比如to={/detail/${item.id}}
• 给轮播图的img加个alt属性，比如<img style={{ width: "100%" }} src={item.poster} alt={item.name || "轮播海报"} />，提升页面可访问性

最后验证 #

改完上面这些，重新跑项目试试：调用栈溢出的错误应该会消失，加载动画会在数据回来后消失，轮播图也能正常显示了。

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