React状态变更时子组件未更新 分页拉取Flask API数据问题

问题根因 #

• 核心原因：Home组件内监听perPage属性的useEffect未声明props.perPage为依赖项。如果useEffect没有写依赖数组，或者依赖数组为空，它只会在组件首次挂载时执行1次，后续props.perPage更新时不会重新触发接口请求，也就不会更新组件内容。
• 现象解释：你手动修改number初始值时会触发整个组件重新编译挂载，Home组件也会重新走挂载逻辑，useEffect会执行所以能拿到新数据；而setState更新状态时是复用现有Home组件实例仅更新属性，没有正确依赖的useEffect不会执行，所以看不到更新。

修复方案 #

1. 补全useEffect依赖项（必改） #

修改Home组件的useEffect代码，将props.perPage加入依赖数组，同时补充加载状态重置和错误处理：

useEffect(() => {
  // 请求发起前重置加载状态，避免展示旧数据
  setIsLoaded(false);
  fetch("my_flask_api/v1/?id=" + props.perPage)
    .then(res => res.json())
    .then((result) => {
      setIsLoaded(true);
      setItems(result);
    })
    .catch(err => {
      setIsLoaded(true);
      console.error('接口请求错误：', err);
      // 可自行补充错误提示逻辑
    })
}, [props.perPage]) // 此处必须声明依赖，属性变化时自动重新执行effect

2. 优化setState写法（可选） #

App组件中updateContent方法直接用this.state计算新值，在高频连续点击场景下可能出现状态计算异常，建议改为函数式更新写法：

updateContent = () => {
  this.setState(prevState => ({
    number: prevState.number + 10
  }));
}

如果完成上述修改后依然不更新，可以检查Home组件是否被React.memo包裹且自定义了不正确的属性比较逻辑，默认的memo浅比较可以正常识别perPage这类数值类型的属性变化。

内容的提问来源于stack exchange，提问作者Mihnea-Octavian Manolache