ReactJS中如何阻止mutate函数重复执行，使其仅执行一次？

问题根源 #

你在List.js的组件函数体内直接调用mutate()，会导致组件每次渲染时都执行该函数：

• mutate()触发fetchData发起请求，请求完成后调用setData更新状态
• 状态更新会引发List组件重新渲染，再次执行mutate()，形成无限循环，最终表现为请求重复执行

解决方案 #

方案一：移除不必要的手动调用（推荐）

FetchData.js中已经通过useEffect(() => { fetchData(); }, [])在初始化时自动加载了数据，因此List.js里的手动mutate()完全多余，直接删除即可：

修改后的List.js：

import React from 'react';
import ListItem from './ListItem'
import FetchData from './FetchData';

function List() {
  const {
    data,
    loading,
  } = FetchData();

  return (
    <ul>
      {loading && <div>Loading</div>}
      {!loading && (
        <>
          {data.map(item => (<ListItem key={item.id} id={item.id} name={item.name} complete={item.complete} />))}
        </>
      )}
    </ul>
  )
}

export default List 

方案二：若需额外触发一次刷新，用useEffect控制执行时机

如果确实需要在List组件挂载后额外刷新一次数据，将mutate()放入useEffect并添加依赖数组，确保仅执行一次：

修改后的List.js：

import React, { useEffect } from 'react';
import ListItem from './ListItem'
import FetchData from './FetchData';

function List() {
  const {
    data,
    loading,
    mutate,
  } = FetchData();

  // 仅在组件挂载时执行一次mutate
  useEffect(() => {
    mutate();
  }, [mutate]);

  return (
    <ul>
      {loading && <div>Loading</div>}
      {!loading && (
        <>
          {data.map(item => (<ListItem key={item.id} id={item.id} name={item.name} complete={item.complete} />))}
        </>
      )}
    </ul>
  )
}

export default List 

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