React按钮点击加载数据报错：期望onClick为函数，求实现方案

错误原因 #

你之前的两种写法都不符合React对onClick回调的要求：

• 第一种写法<button onClick="randomUserDataJSON">传的是字符串，React要求onClick必须接收一个函数
• 第二种写法<button onClick={randomUserDataJSON}>传的是状态变量randomUserDataJSON，它的类型是字符串，不是函数，所以触发错误

正确实现方式 #

给按钮的onClick绑定一个函数，在这个函数里调用fetchRandomData并更新状态，具体修改如下：

修改后的完整代码：

import "./styles.css";
import { useEffect, useState } from 'react'
import axios from 'axios'

export default function App() {
  const [count, setCount] = useState(0)
  const [randomUserDataJSON, setRandomUserDataJSON] = useState('')

  // 组件加载时默认请求一次数据（保留你原有的逻辑）
  useEffect(() => {
    fetchRandomData().then(randomData => {
      setRandomUserDataJSON(randomData || '')
    })
  }, [])

  const fetchRandomData = () => {
    return axios.get('https://randomuser.me/api')
      .then(({ data }) => {
        console.log(data);
        return JSON.stringify(data, null, 2) // 格式化JSON，让输出更易读
      })
      .catch(error => {
        console.log(error)
        return '' // 出错时返回空字符串，避免状态异常
      })
  } 

  // 点击按钮触发的回调函数
  const handleFetchData = async () => {
    const data = await fetchRandomData()
    setRandomUserDataJSON(data)
  }

  return (
    <div className="App">
      <h2>how to implement useEffect</h2>
      {/* 绑定正确的点击回调函数 */}
      <button onClick={handleFetchData}>Fetch Random Data</button>
      {/* 渲染获取到的JSON数据 */}
      <pre>{randomUserDataJSON}</pre>
       
    </div>
  );
}

关键修改点 #

• 新增handleFetchData函数作为按钮的点击回调，内部调用fetchRandomData并更新状态
• 把onClick绑定到handleFetchData函数（注意不要加括号，加括号会导致组件渲染时直接执行函数，而非点击时触发）
• 在JSON.stringify中添加null, 2参数，格式化输出的JSON结构，方便查看
• 在pre标签中渲染randomUserDataJSON，点击按钮后就能看到获取到的数据

内容的提问来源于stack exchange，提问作者Syed Laeeq Ahmed