React布尔状态控制显示异常求助：点击按钮无法切换Select文本

问题描述 #

我尝试通过布尔props实现以下功能：点击Selected按钮时显示Select文本，点击Delected按钮时隐藏Select文本，但当前代码无法实现该效果，请帮忙排查问题。

现有代码 #

App.js #

import "./styles.css";
import MainShow from "./Show";
import { useState } from "react";

export default function App() {
  var [isDone, setDone] = useState(false);
  const Delected = () => {
    setDone(!isDone);
    console.log("set");
  };
  const Selected = () => {
    setDone(!isDone);
    console.log("Del");
  };
  return (
    <div className="App">
      <h1>Hello ,Problem Solver</h1>
      <MainShow DoneMain={isDone} /> //imported
      <button onClick={Delected}>Delected</button>  //Delected button 
      <button onClick={Selected}>Selected</button>  //Selected button
    </div>
  );
}

Show.jsx #

import React, { useState } from "react";
const Main = (props) => {
  const [isDone] = useState(props.DoneMain);
  console.log(isDone);
  return (
    <div>
      <div>
        <div
          className="container"
          style={{ display: isDone ? "block" : "none" }}
        >
          <p> Select</p>
        </div>
        <p>Hello</p>
      </div>
    </div>
  );
};
export default Main;

问题原因 #

1. 子组件状态不同步：Show.jsx中用useState(props.DoneMain)创建了本地状态，但useState的初始值仅在组件首次渲染时生效，后续父组件的isDone更新后，子组件的本地isDone不会自动同步，导致显示状态无法跟随父组件变化。
2. 按钮逻辑不符合需求：父组件中两个按钮的点击事件都执行setDone(!isDone)，这是切换状态的逻辑，而非“Selected显示、Delected隐藏”的明确设置。

解决方案 #

1. 修正Show.jsx（移除本地状态，直接使用props） #

import React from "react";
const Main = (props) => {
  console.log(props.DoneMain);
  return (
    <div>
      <div>
        <div
          className="container"
          style={{ display: props.DoneMain ? "block" : "none" }}
        >
          <p> Select</p>
        </div>
        <p>Hello</p>
      </div>
    </div>
  );
};
export default Main;

2. 修正App.js（明确按钮的状态设置逻辑） #

import "./styles.css";
import MainShow from "./Show";
import { useState } from "react";

export default function App() {
  const [isDone, setDone] = useState(false);
  const Delected = () => {
    setDone(false); // 点击后隐藏文本
    console.log("隐藏");
  };
  const Selected = () => {
    setDone(true); // 点击后显示文本
    console.log("显示");
  };
  return (
    <div className="App">
      <h1>Hello ,Problem Solver</h1>
      <MainShow DoneMain={isDone} />
      <button onClick={Delected}>Delected</button>
      <button onClick={Selected}>Selected</button>
    </div>
  );
}

说明 #

• 子组件直接使用父组件传递的props.DoneMain，父组件状态更新时，子组件会自动重新渲染并应用最新的显示规则。
• 给两个按钮设置明确的状态值，确保点击Selected时显示文本，点击Delected时隐藏文本，完全匹配需求。

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