使用useState钩子实现条件渲染的问题求助

你的代码里有几个关键问题导致组件切换功能失效，下面逐一说明并给出修正方案：

1. 组件命名不符合React规范 #

React 自定义组件必须以大写字母开头，否则会被识别为原生HTML标签，无法正常渲染。你的 eventUpdated 组件需要改名为 EventUpdated。

2. useState状态更新逻辑错误 #

你初始化的 state 是布尔类型（true），但在更新时错误地将其当作对象处理。正确的函数式更新应该直接对前一次状态取反，而非访问 prevstate.state。

3. React中需用className替代class #

JSX语法里不能直接使用原生HTML的class属性，要替换为className，避免和JavaScript关键字冲突。

4. 回调函数与状态变量的语义化优化 #

原代码里的状态变量名和回调函数名不够清晰，建议改为更具语义化的命名，方便后续维护。

修正后的完整代码 #

function Event(props) {
  return (
    <>
      <h1> Nueva carga de archivo...</h1>
      <p className="Message"> Nueva base de datos Jun22xls</p>
      <progress value="10" max="100">
        75%
      </progress>
    </>
  );
}

// 组件名改为大写开头
function EventUpdated(props) {
  return <h1>Archivo Cargado exitosamente</h1>;
}

function Progressbar(props) {
  // 语义化状态变量名
  const [isShowingEvent, setIsShowingEvent] = useState(true);

  const handleToggleComponent = useCallback(() => {
    // 正确的函数式状态更新
    setIsShowingEvent(prevState => !prevState);
  }, []);

  return (
    <div className="Container">
      {/* 渲染大写后的组件 */}
      {isShowingEvent ? <Event /> : <EventUpdated />}
      <AiOutlineCloseCircle className="close-icon" onClick={handleToggleComponent} />
    </div>
  );
}

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