React模态框关闭异常求助：点击X后passedMake值反复变回true

你的模态框无法关闭的核心问题是父子组件状态不同步+不必要的状态重复传递：

在NavigationBar组件中，你直接在组件主体里调用了toParentIsMake(make)，这意味着每次组件渲染时都会执行这个函数。当你点击关闭按钮将passedMake设为false后，父组件HomePage会重新渲染，进而触发NavigationBar重新渲染。此时NavigationBar的本地make状态仍然是true（你从未将其更新为false），所以它会再次调用toParentIsMake(true)，把父组件的passedMake又改回true，导致模态框无法关闭。

方案一：单状态源（推荐） #

移除子组件的本地状态，让父组件完全控制模态框的显示状态，避免状态重复：

修改后的NavigationBar组件：

import React from 'react'
import styled from 'styled-components';

// ... 保留原有样式代码

function NavigationBar({toParentIsMake, passedMake}) {
  // 移除本地make状态，直接使用父组件传递的passedMake

  const handleIconClick = () => {
    toParentIsMake(true); // 点击图标时告诉父组件打开模态框
  }

  return (
    <NavigationBarWrap1 search={search} profile={profile} alarm={alarm} seeMore={seeMore}>
      <div className='NavigationBarWrap2'>
        <div className='IconWrap3'>
          <div className='IconWrap4'>
            <div onClick={handleIconClick} className='IconWrap5'>
              <div>
                <div className='IconWrap6'>
                  <div className='IconWrap7'>
                    {/* 使用父组件传递的passedMake判断显示哪个图标 */}
                    {passedMake === true ?
                    <>
                      <svg aria-label="새로운 게시물" class="_ab6-" color="#262626" fill="#262626" height="24" role="img" viewBox="0 0 24 24" width="24"><path d="m12.003 5.545-.117.006-.112.02a1 1 0 0 0-.764.857l-.007.117V11H6.544l-.116.007a1 1 0 0 0-.877.876L5.545 12l.007.117a1 1 0 0 0 .877.876l.116.007h4.457l.001 4.454.007.116a1 1 0 0 0 .876.877l.117.007.117-.007a1 1 0 0 0 .876-.877l.007-.116V13h4.452l.116-.007a1 1 0 0 0 .877-.876l.007-.117-.007-.117a1 1 0 0 0-.877-.876L17.455 11h-4.453l.001-4.455-.007-.117a1 1 0 0 0-.876-.877ZM8.552.999h6.896c2.754 0 4.285.579 5.664 1.912 1.255 1.297 1.838 2.758 1.885 5.302L23 8.55v6.898c0 2.755-.578 4.286-1.912 5.664-1.298 1.255-2.759 1.838-5.302 1.885l-.338.003H8.552c-2.754 0-4.285-.579-5.664-1.912-1.255-1.297-1.839-2.758-1.885-5.302L1 15.45V8.551c0-2.754.579-4.286 1.912-5.664C4.21 1.633 5.67 1.05 8.214 1.002L8.552 1Z"></path></svg>
                    </>:
                    <>
                      <svg aria-label="새로운 게시물" class="_ab6-" color="#262626" fill="#262626" height="24" role="img" viewBox="0 0 24 24" width="24"><path d="M2 12v3.45c0 2.849.698 4.005 1.606 4.944.94.909 2.098 1.608 4.946 1.608h6.896c2.848 0 4.006-.7 4.946-1.608C21.302 19.455 22 18.3 22 15.45V8.552c0-2.849-.698-4.006-1.606-4.945C19.454 2.7 18.296 2 15.448 2H8.552c-2.848 0-4.006.699-4.946 1.607C2.698 4.547 2 5.703 2 8.552Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6.545" x2="17.455" y1="12.001" y2="12.001"></line><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12.003" x2="12.003" y1="6.545" y2="17.455"></line></svg>
                    </>}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </NavigationBarWrap1>
  )
}

export default NavigationBar;

方案二：同步父子组件状态 #

如果你需要保留子组件的本地状态，需添加useEffect确保状态同步且仅在状态变化时传递给父组件：

修改后的NavigationBar组件：

import React, { useState, useEffect } from 'react'
import styled from 'styled-components';

// ... 保留原有样式代码

function NavigationBar({toParentIsMake, passedMake}) {
  const[make,setMake] = useState(false);

  // 同步子组件状态与父组件传递的passedMake
  useEffect(() => {
    setMake(passedMake);
  }, [passedMake]);

  const setTrueMake = () => {
    setMake(true);
  }

  const forMake = (e) => {
    setTrueMake();
  }

  // 仅在make状态变化时传递给父组件
  useEffect(() => {
    toParentIsMake(make);
  }, [make, toParentIsMake]);

  // ... 保留原有返回结构
}

export default NavigationBar;

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