React useEffect依赖news/events拉取数据触发无限重渲染问题求助

• 无限渲染的核心是useEffect依赖配置逻辑形成了闭环：你将news、events作为useEffect的触发依赖，而每次执行getNewsAndEvents都会重写这两个数组的引用，触发依赖变更后又会再次调用getNewsAndEvents，循环往复形成死循环。
• 本次问题在新增加载动画后才出现，本质和加载逻辑无关，大概率是你调整依赖配置时误将news、events加入了依赖触发项。
• 你提到的"数据变更时同步更新展示"的需求，已经由MobX的observer能力覆盖：observer包裹的组件会自动监听所有用到的observable状态变化，自动触发重渲染，完全不需要通过useEffect依赖来触发数据拉取操作。

直接将useEffect的依赖项改为空数组，仅在组件首次挂载时执行一次全量数据拉取即可：

useEffect(() => {
  getNewsAndEvents();
}, []);

如果后续有手动刷新数据的需求，额外添加刷新按钮主动调用getNewsAndEvents即可，视图会自动同步最新的news、events数据。

你当前在store中组装数组的写法可以简化，直接赋值新数组即可，不需要先清空再逐个push，逻辑完全等价：

runInAction(() => {
  this.events = response.events.map((item: any) => ({
    id: item._id,
    date_time: item.date_time,
    name: item.name,
    description: item.description,
    price: item.price,
    type: ContentType.event,
  }));
  this.news = response.news.map((item: any) => ({
    id: item._id,
    title: item.title,
    content: item.content,
    type: ContentType.news,
  }));
  this.loading = false;
})

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