传递React状态时出现异常警告：无法在渲染子组件时更新父组件

核心错误点 #

• 自定义组件名未遵循大写开头规则：React规定自定义组件必须以大写字母开头，否则会被当作原生HTML标签处理，无法正确执行自定义组件逻辑，进而触发状态更新的异常警告。
• return语句的自动分号插入问题：JavaScript会在return后的换行处自动插入分号，导致后续的JSX代码未被返回，组件实际返回undefined，引发渲染逻辑混乱。

修正后的代码 #

import { useState } from 'react';

// 组件名改为大写开头
const ParentComponent = () => {
  const [show, setShow] = useState(false);

  // return 与左括号放在同一行，避免自动分号插入问题
  return (
    <>
      <ChildComponent setShowDependent={() => setShow(true)} />
      { show && <DependentComponent /> }
    </>
  );
}

// 组件名改为大写开头
const ChildComponent = ({ setShowDependent }) => {
  // 若Button为自定义组件需大写，第三方库（如MUI）的Button本身已大写则无需修改
  return <Button onClick={setShowDependent} />;
}

// 补充依赖组件示例（若未定义）
const DependentComponent = () => {
  return <div>这是依赖渲染的组件</div>;
}

额外说明 #

• 组件名大写是React识别自定义组件的核心规则，必须严格遵循。
• 返回JSX时，尽量将return与左括号放在同一行，或用括号完整包裹JSX内容，避免因自动分号插入导致的逻辑错误。

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