React useState状态值设置后被重置为Null问题排查及组件重复挂载解决方案咨询

咱们先拆解你遇到的核心问题：startDate被设置后又变回null，以及组件重复挂载，顺便修复代码里的隐藏坑。

1. startDate被重置的直接原因 #

先看你DisplayTicTacToeContainer里的这段代码：

useEffect (() => {
  setStartDate(null);
}, []);

这个空依赖的useEffect会在组件每次挂载时执行一次。如果组件被挂载两次，第一次挂载后子组件把startDate设为有效值，第二次挂载时这个useEffect又会把它重置回null——这就是你看到“设置后又变回空”的核心原因。

另外，你的TicTacToeContainer里还有一个严重的错误：

const [board, setBoard] = useState(<Board updateStartDate={updateStartDate} startDate={startDate} setStartDate={setStartDate}/>);
return ( 
  <Board/> 
)

这里有两个问题：

• 你把Board组件存在useState里，但完全没用到这个状态，反而返回了一个全新的、没传任何props的<Board/>，导致Board根本接收不到startDate和updateStartDate，点击事件的更新逻辑自然失效。
• 就算你用了状态里的board，useState的初始值只会执行一次，后续startDate变化时，状态里的Board不会自动更新props，会一直使用旧的状态值。

2. 解决组件重复挂载问题 #

组件重复挂载最常见的几个原因和对应方案：

原因1：React StrictMode（开发环境专属） #

如果项目根组件（比如index.js）用了<StrictMode>，React在开发环境下会强制组件挂载两次，用来检测潜在的副作用。这是正常的开发行为，生产环境不会出现。

解决方案：

• 开发环境下的调试问题可以忽略，生产环境会自动恢复正常。
• 若想临时关闭，可注释掉<StrictMode>标签，但不推荐长期这么做——它能帮你提前发现很多bug。

原因2：父组件传递的key不稳定 #

如果父组件给DisplayTicTacToeContainer的key是动态生成的（比如Math.random()），React会认为这是新组件，从而卸载旧组件、挂载新组件。

解决方案：

• 给组件设置稳定的key，比如基于固定ID或不会频繁变化的值。

原因3：在父组件render内定义组件 #

如果DisplayTicTacToeContainer是在另一个组件的render函数里定义的（如下），每次父组件render时都会创建全新的组件类型，触发卸载再挂载：

function Parent() {
  const DisplayTicTacToeContainer = () => { /* ... */ }
  return <DisplayTicTacToeContainer />
}

解决方案：

• 把组件定义移到父组件外部，确保组件类型稳定。

3. 修复startDate的完整代码调整 #

先修正TicTacToeContainer的错误，去掉无用状态，直接传递props：

const TicTacToeContainer = (props) => {
  const { startDate, setStartDate, updateStartDate } = props;
  // 去掉无用的useState，直接返回带props的Board
  return ( 
    <Board 
      updateStartDate={updateStartDate} 
      startDate={startDate} 
      setStartDate={setStartDate} 
    /> 
  )
}
export default TicTacToeContainer;

然后，把startDate的初始化直接放在useState里，去掉多余的useEffect：

export const DisplayTicTacToeContainer = (props) => { 
  // 直接在初始化时设为null，避免空依赖useEffect的重置问题
  const [startDate, setStartDate]= useState(null); 
  const updateStartDate = (newDate) => { 
    setStartDate(newDate); 
  } 
  // 移除这个会重复重置状态的useEffect
  // useEffect (() => { 
  //   setStartDate(null); 
  // }, []); 
  useEffect(() => { 
    console.log( "displayTicTacToeContainer useEffect for change of startDate = ", startDate) 
  }, [startDate]); 
  return ( 
    <DisplayTicTacToeMatch 
      arrayOfMatchingItems={arrayOfMatchingItems} 
      startDate={startDate} 
      setStartDate={setStartDate} 
      updateStartDate={updateStartDate} 
    />
  ); 
} 

这样调整后，就算组件在开发环境下被StrictMode挂载两次，初始化的startDate是null，之后子组件设置的值也不会被重复执行的useEffect重置了。

总结 #

你的问题本质是两个点：

1. 错误的useEffect和组件渲染逻辑导致状态被意外重置；
2. 组件重复挂载（大概率是StrictMode的开发环境行为）放大了这个问题。

按照上面的步骤调整后，应该就能解决startDate被重置的问题，同时避免组件重复挂载带来的其他潜在问题。

内容的提问来源于stack exchange，提问作者j-terranova