MERN栈CRUD开发中GetData函数内onClick事件触发异常求助

我正在自学MERN栈的CRUD开发，遇到一个问题：GetData函数内的onClick事件无法正常触发，仅在多次点击后才生效。测试发现按钮放在该函数外时可正常工作。

原代码 #

function GetData() {
    try{
      useEffect(()=>{
        axios.get('http://localhost:3000/app/profile', {
        })
        .then((response)=>{
          const userdata = response.data;
          setUser(userdata)
          console.log(userdata)
        })
      },[])
      if (User.length > 0){
        try{
           return User.map((user) => {
            return(
              <div style={{ display:'flex', marginTop:'1em'}}>
                <div style={{ marginLeft:'15em', width:'500px'}}>
                  <h style={h2}>{user.name}</h>
                </div>
                <div style={{ width:'350px' }}>
                  <h style={h2}>{user.email}</h>
                </div>
                <div>
                  <button onClick={()=>{alert('update');}}>UPDATE</button>
                  <button onClick={()=>{alert('delete');}}>DELETE</button>
                </div>
              </div>
            );
          })
        } catch(e){
          console.log(e)
        }
      }
    } catch(e){
      console.log(e)
    }
  }

package.json配置 #

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.1.3",
    "bootstrap": "^5.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-react": "^7.18.6"
  }
}

问题原因 #

1. Hook使用违规：useEffect是React Hook，只能在函数组件的顶层调用，不能嵌套在普通函数、条件判断或循环里。你在GetData这个普通函数里调用useEffect，会导致每次组件渲染时都重新创建GetData函数，内部的useEffect重复执行，状态频繁更新，DOM反复渲染，最终造成点击事件绑定不稳定。
2. 元素引用不稳定：GetData每次渲染都会生成新的JSX元素引用，React无法正确追踪事件绑定，导致点击事件延迟或失效。

解决方案 #

方案一：重构为独立React组件

把数据渲染逻辑抽成单独的组件，数据获取逻辑放在主组件顶层：

// 用户列表组件
function UserList({ User }) {
  if (User.length === 0) return null;

  return User.map((user) => (
    // 必须添加唯一key，帮助React高效更新DOM
    <div key={user._id} style={{ display:'flex', marginTop:'1em'}}>
      <div style={{ marginLeft:'15em', width:'500px'}}>
        <h style={h2}>{user.name}</h>
      </div>
      <div style={{ width:'350px' }}>
        <h style={h2}>{user.email}</h>
      </div>
      <div>
        <button onClick={()=>{alert('update');}}>UPDATE</button>
        <button onClick={()=>{alert('delete');}}>DELETE</button>
      </div>
    </div>
  ));
}

// 主组件
function ProfilePage() {
  const [User, setUser] = useState([]);

  useEffect(()=>{
    axios.get('http://localhost:3000/app/profile')
      .then((response)=>{
        setUser(response.data);
        console.log(response.data);
      })
      .catch(err => console.log('请求失败：', err)); // 新增错误捕获
  },[]);

  return (
    <div>
      <UserList User={User} />
    </div>
  );
}

方案二：逻辑整合到主组件

如果不需要单独抽组件，直接把所有逻辑放在主组件顶层：

function ProfilePage() {
  const [User, setUser] = useState([]);

  useEffect(()=>{
    axios.get('http://localhost:3000/app/profile')
      .then((response)=>{
        setUser(response.data);
        console.log(response.data);
      })
      .catch(err => console.log('请求失败：', err));
  },[]);

  if (User.length === 0) return <div>加载中...</div>;

  return (
    <div>
      {User.map((user) => (
        <div key={user._id} style={{ display:'flex', marginTop:'1em'}}>
          <div style={{ marginLeft:'15em', width:'500px'}}>
            <h style={h2}>{user.name}</h>
          </div>
          <div style={{ width:'350px' }}>
            <h style={h2}>{user.email}</h>
          </div>
          <div>
            <button onClick={()=>{alert('update');}}>UPDATE</button>
            <button onClick={()=>{alert('delete');}}>DELETE</button>
          </div>
        </div>
      ))}
    </div>
  );
}

注意事项 #

• 始终遵守React Hook规则：Hook只能在函数组件顶层调用，不能嵌套。
• 给map生成的元素添加唯一key属性，避免React渲染异常。
• 网络请求必须添加catch块，捕获请求失败的情况。

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