Next.js模态框首次打开时内容不重新渲染问题求助

点击Post组件的Edit按钮触发ShowEditConfirmation函数打开模态框，初始audioDeleted为false时显示Delete按钮。点击Delete按钮调用setAudioDeleted(!audioDeleted)后，状态未即时更新——点击Apply Changes打印值仍为false，关闭模态框重新打开才会显示Undo按钮。

核心问题是模态框的内容是在打开时一次性渲染并存在state里的快照，后续audioDeleted状态变化时，已经保存的JSX内容不会重新渲染，因为它捕获的是创建那一刻的闭包值，不会跟着状态更新同步变化。

方法一：修改Modal组件支持动态渲染内容 #

先调整Modal组件，让它支持接收一个返回JSX的函数，这样每次模态框渲染时都会重新执行函数，获取最新状态：

// modal.js 修改后
const Modal = (props) => {
  const {modalShown, hideModal, title, content} = props

  return (
    <>
      <div onClick={hideModal} className={`${modalShown ? 'fixed' : 'hidden'}`}></div>
      <div>
        <h3>{title}</h3>
        <button onClick={hideModal}>&times;</button>
        <div id='modal-content' className="max-h-96 overflow-auto">
          {/* 如果content是函数就执行它，否则直接渲染 */}
          {typeof content === 'function' ? content() : content}
        </div>
      </div>
    </>
  )
}

export default Modal

然后修改index.js里的模态框调用逻辑，传入函数而非直接传入JSX，同时用函数式更新audioDeleted避免闭包问题：

// index.js 修改部分
const showModal = (title, content) => {
  setModalTitle(title)
  setModalContent(content)
  setModalShown(true)
}

const ShowEditConfirmation = () => {
  // 这里传入一个返回JSX的函数，而不是直接写JSX
  showModal('Edit post?', () => (
    <div>
      {/* 用函数式更新获取最新的前状态 */}
      <button onClick={() => setAudioDeleted(prev => !prev)}>
        { audioDeleted ? 'Undo' : 'Delete' }
      </button>
      <button onClick={() => {
        console.log(audioDeleted)
      }}>Apply Changes</button>
    </div>
  ))
}

方法二：重构模态框逻辑（可选） #

如果不想修改Modal组件，也可以把模态框的内容逻辑直接放在父组件的渲染中，不把JSX存在state里：

// index.js 重构后的return部分
return (
  <>
    <main>
      {modalShown && (
        <Modal modalShown={modalShown} hideModal={hideModal} title={modalTitle}>
          <div>
            <button onClick={() => setAudioDeleted(prev => !prev)}>
              { audioDeleted ? 'Undo' : 'Delete' }
            </button>
            <button onClick={() => console.log(audioDeleted)}>Apply Changes</button>
          </div>
        </Modal>
      )}
      <div>
        {posts.map((post, index) => (
          <Post key={post.id} ShowEditConfirmation={() => {
            setModalTitle('Edit post?')
            setModalShown(true)
          }} />
        ))}
      </div>
    </main>
  </>
)

同时调整Modal组件，让它接收children而不是content prop：

// modal.js 重构后
const Modal = (props) => {
  const {modalShown, hideModal, title, children} = props

  return (
    <>
      <div onClick={hideModal} className={`${modalShown ? 'fixed' : 'hidden'}`}></div>
      <div>
        <h3>{title}</h3>
        <button onClick={hideModal}>&times;</button>
        <div id='modal-content' className="max-h-96 overflow-auto">{children}</div>
      </div>
    </>
  )
}

export default Modal

两种方法本质都是让模态框的内容每次渲染时都能获取最新的状态值，而不是依赖打开时的闭包快照。方法一更灵活，适合需要动态切换不同模态内容的场景；方法二更直观，适合模态内容相对固定的场景。

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