React条件渲染不生效且报render内不可更新状态错误如何解决

报错原因 #

addToast方法内部会触发toast相关状态更新，你将其直接写在了RenderToast组件的JSX插值中，相当于组件渲染过程中同步执行状态更新操作。而React要求render逻辑必须是无副作用的纯函数，渲染过程中不能触发其他状态更新，和当前正在进行的状态转换流程冲突，因此抛出该报错。

解决方案 #

将addToast的调用放到渲染完成后执行的副作用逻辑中即可，不需要额外定义RenderToast组件的写法如下：

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

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

  // 监听test变化，渲染完成后判断是否弹出toast
  useEffect(() => {
    if (test) {
      addToast('message');
    }
  }, [test, addToast]);

  return (
    <div>
      {/* 其他需要随test渲染的内容可放在此处 */}
    </div>
  )
}

如果确实需要封装RenderToast组件，写法如下：

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

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

  function RenderToast() {
    const { addToast } = useToasts();
    // 组件挂载完成后触发toast
    useEffect(() => {
      addToast('message');
    }, [addToast])
    return <div></div>
  }

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

核心规则 #

• 所有会触发状态更新的操作，禁止直接写在函数组件顶层、JSX插值这类渲染流程逻辑中
• 这类需要在组件挂载/状态变化时触发的副作用操作，统一放在useEffect中执行，useEffect会在渲染完成后调用，不会和渲染流程冲突

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