Next.js中条件JSX变量变化未触发组件重渲染如何解决

用let声明的普通变量不属于React的响应式状态，React不会追踪这类变量的变更，变量修改后不会触发组件重渲染。
组件仅在三种场景下会执行重渲染：自身初始化、父组件触发重渲染、自身持有的响应式状态/订阅的上下文发生变更。你手动刷新页面相当于重新初始化整个组件，会读取到最新的isClicked值，所以刷新后条件渲染逻辑可以正常运行。

根据你使用的组件类型选择对应写法，核心是把普通变量替换为React认可的响应式状态，通过官方提供的更新方法修改值：

• 函数组件：使用内置的useState Hook声明状态，通过配套的setter函数更新值，不要直接给状态变量赋值

import { useState } from 'react';

// 组件内部声明响应式状态
const [isClicked, setIsClicked] = useState(false);

// 需要修改状态的位置调用setter，比如点击事件回调中
const toggleStatus = () => {
  setIsClicked(prev => !prev);
}

// 原有渲染逻辑无需改动
<div className="relative">
   {!isClicked ? (
    <div className="relative">
       1
    </div>
    ) : (
    <div className="relative">
       2
    </div>
    )
   }
</div>

• 类组件：将变量挂载到this.state上，通过this.setState方法更新值

import React from 'react';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    }
  }

  toggleStatus = () => {
    this.setState(prev => ({ isClicked: !prev.isClicked }));
  }

  render() {
    return (
      <div className="relative">
        {!this.state.isClicked ? (
          <div className="relative">1</div>
        ) : (
          <div className="relative">2</div>
        )}
      </div>
    )
  }
}

注意：直接给响应式状态赋值（比如isClicked = true、this.state.isClicked = true）不会被React的状态更新逻辑捕获，依然无法触发重渲染，必须通过官方提供的更新方法修改状态。

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