React函数组件中如何在条件内设置状态？求助代码修复

问题拆解 #

你代码里有两个核心问题：

• 直接在条件渲染的JSX中调用setEditOnClick(false)：React渲染阶段不能直接修改状态，这会触发无限重渲染循环，导致页面卡死。
• 按钮的onMouseEnter事件绑定多了一个闭合大括号，属于语法错误，会直接导致组件无法正常编译。

修复后的完整代码 #

import { useState } from 'react';

// 组件名首字母大写，符合React规范
const PeopleCard = () => {
  const [isEditOnClick, setEditOnClick] = useState(false);
  // 变量名驼峰化，统一编码风格
  const [peopleID, setPeopleID] = useState('');

  // 定义模态框关闭的回调函数
  const closeModal = () => {
    setEditOnClick(false);
  };

  return (
    <>
      {/* 这里放置你的其他业务代码 */}

      {/* 条件渲染模态框：仅当isEditOnClick为true时显示 */}
      {isEditOnClick && <CrudModal id={peopleID} onClose={closeModal} />}

      {/* 修复后的按钮事件绑定 */}
      <button onMouseEnter={() => setEditOnClick(true)}>
        鼠标移入打开编辑框
      </button>
    </>
  );
};

export default PeopleCard;

关键修复细节 #

1. 移除渲染中的状态更新：把setEditOnClick(false)从JSX渲染逻辑中移出，改为通过模态框的onClose回调触发状态重置——这是React处理组件状态的正确方式，避免渲染时触发状态变更的循环问题。
2. 修正按钮语法错误：删掉onMouseEnter回调末尾多余的}，确保JSX语法合法。
3. 规范命名风格：组件名改为PeopleCard（首字母大写是React组件的强制要求），setpeopleID改成setPeopleID，统一使用驼峰命名，避免风格混乱。
4. 简化条件渲染：用&&替代? ... : null，写法更简洁，逻辑完全一致。

补充：适配无onClose属性的CrudModal #

如果你的CrudModal组件未内置关闭回调，需要先给它添加该能力：

// CrudModal组件示例
const CrudModal = ({ id, onClose }) => {
  return (
    <div className="modal-container">
      {/* 模态框业务内容 */}
      <h3>编辑用户 {id}</h3>
      {/* 关闭按钮绑定父组件传递的回调 */}
      <button onClick={onClose}>关闭模态框</button>
    </div>
  );
};

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