React调用API后Toast消息重复显示问题求助

问题根源 #

你的代码里，useEffect的依赖数组包含了toastShown。当API请求成功后，调用setToastShown(true)会触发组件重渲染，同时因为toastShown是依赖项，useEffect会再次执行。如果开启了React严格模式，React还会刻意执行两次useEffect来检测副作用，这就直接导致Toast被触发两次。即使不在严格模式下，依赖项的不当设置也会让useEffect重复运行，增加重复触发的风险。

解决方案 #

方案1：让useEffect仅在组件挂载时执行一次

将useEffect的依赖数组改为空数组，确保它只在组件首次挂载时运行一次，避免重复执行API请求和Toast触发：

const [toastShown, setToastShown] = useState(false);
useEffect(() => {
  document.title = "All Courses";

  axios.get(`${base_url}/courses`).then(
    (response) => {
      setCourses(response.data);
      if (!toastShown) {
        toast.success("Courses loaded successfully!");
        setToastShown(true);
      }
    },
    (error) => {
      toast.error("Something went wrong!");
    }
  );
}, []); // 空依赖数组，仅组件挂载时执行一次

注意：React可能会提示toastShown和setCourses未在依赖数组中，此时可以用useRef方案来规避警告。

方案2：使用useRef跟踪Toast状态（推荐）

useRef的值更新不会触发组件重渲染，所以不会导致useEffect重复执行，同时能准确跟踪Toast是否已经显示：

const toastShownRef = useRef(false);
useEffect(() => {
  document.title = "All Courses";

  axios.get(`${base_url}/courses`).then(
    (response) => {
      setCourses(response.data);
      if (!toastShownRef.current) {
        toast.success("Courses loaded successfully!");
        toastShownRef.current = true;
      }
    },
    (error) => {
      toast.error("Something went wrong!");
    }
  );
}, []); // 空依赖数组，仅组件挂载时执行一次

这个方案不会触发额外重渲染，也不会出现React的依赖警告，是更稳妥的处理方式。

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