React使用useState+toast实现条件渲染失效并触发状态更新报错求助

错误根因 #

报错是因为你在组件渲染流程中执行了带副作用的状态更新操作：addToast方法内部会更新react-toast-notifications库的全局状态，而你直接把它放在了组件返回的JSX代码块中执行，属于在render阶段更新状态，违反了React要求渲染函数必须为纯函数的规则。

修复方案 #

方案1：在组件挂载后执行副作用 #

如果你需要保留RenderToast组件的结构，可以用useEffect把addToast调用放到组件挂载完成后的副作用阶段执行，避开渲染流程：

import React, { useState, useEffect } from "react";
import { useToasts } from "react-toast-notifications";

const Index = () => {
  const [test, setTest] = useState(true);
  const { addToast } = useToasts();

  function RenderToast() {
    useEffect(() => {
      addToast('message');
    }, [addToast]);

    return <div>{/* 这里写你需要RenderToast渲染的UI内容 */}</div>
  }

  return (
    <div>
      {test && <RenderToast />}
    </div>
  )
}

方案2：直接监听状态变化触发提示 #

如果RenderToast不需要渲染额外UI，只是用来触发提示，可以直接在根组件监听test状态变化触发提示，简化代码：

import React, { useState, useEffect } from "react";
import { useToasts } from "react-toast-notifications";

const Index = () => {
  const [test, setTest] = useState(true);
  const { addToast } = useToasts();

  useEffect(() => {
    if(test) {
      addToast('message');
    }
  }, [test, addToast]);

  return <div>{/* 其他业务UI */}</div>
}

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