React运行时报Cannot add node 1错误及滑动器上下限功能失效问题

云原生阿岚

2026-10-5

问题修复方案

1. 滑动器边界切换功能失效问题

错误原因：

用来计数的size是普通JS变量，不属于React响应式状态，修改它不会触发组件重渲染，页面展示的value也不会同步更新
边界判断逻辑完全错误：size < 1 && size > slides.length的条件永远不可能成立，数值无法同时小于1且大于3
点击事件绑定在<a>标签上，默认会触发页面跳转刷新，导致所有状态重置

修正后代码：

import { useState } from "react";
import "./styles.css";

export default function App() {
  // 直接用value作为当前页码，初始值设为1符合最小边界要求
  const [value, setValue] = useState(1);
  const slides = ["one", "two", "three"];
  const maxSize = slides.length;

  const prev = (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    if (value <= 1) return;
    setValue(prev => prev - 1);
  };

  const next = (e) => {
    e.preventDefault();
    if (value >= maxSize) return;
    setValue(prev => prev + 1);
  };

  return (
    <div className="slider">
      <a href="/" className="prev" onClick={prev}>
        Previous
      </a>
      <h2>Barking Road, London {value}</h2>
      <a href="/" className="next" onClick={next}>
        Next
      </a>
    </div>
  );
}