React点击按钮切换图片报错：onClick需传入函数而非对象

你的报错原因很明确：你直接在onClick里调用了ChangeImage({ad1})，这会立刻执行函数，把函数的返回值（async函数返回Promise对象）传给onClick，而onClick需要的是一个函数引用，不是对象。

另外还有两个小问题：

• 你给ChangeImage传的是{ad1}（一个包含ad1属性的对象），但函数里需要的是文件名字符串/资源路径，直接传ad1就行。
• React不推荐直接通过document.querySelector操作DOM，应该用状态来管理视图，这是React的核心思想。

修复方案1：修正onClick传递方式（保留DOM操作，不推荐） #

把按钮的onClick改成箭头函数包裹，确保传递的是函数：

import React from 'react'
import './BigAd.css'
import ad1 from './ad1.jpg'
import ad2 from './ad2.jpg'
import ad3 from './ad3.jpg'
import ad4 from './ad4.png'

export default function BigAd() {
    const ChangeImage = (fileName)=>{
       let img = document.querySelector("#BannerAd")
        img.setAttribute("src", fileName)
    }
  return (
    <div>
         <div className="container">
        <img id='BannerAd' src={ad1} alt="Ad"/>
        <button onClick={() => ChangeImage(ad1)}>button 2</button>
        <button onClick={() => ChangeImage(ad2)}>button 3</button>
        <button onClick={() => ChangeImage(ad3)}>button 1</button>
        <button onClick={() => ChangeImage(ad4)}>button 4</button>
        </div> 
    </div>
  )
}

注：这里去掉了async，因为函数里没有异步操作，没必要用async。

修复方案2：用React状态管理（推荐，符合React范式） #

用useState来控制当前显示的图片，完全避免DOM操作：

import React, { useState } from 'react'
import './BigAd.css'
import ad1 from './ad1.jpg'
import ad2 from './ad2.jpg'
import ad3 from './ad3.jpg'
import ad4 from './ad4.png'

export default function BigAd() {
    const [currentAd, setCurrentAd] = useState(ad1)

    const ChangeImage = (fileName)=>{
       setCurrentAd(fileName)
    }
  return (
    <div>
         <div className="container">
        <img src={currentAd} alt="Ad"/>
        <button onClick={() => ChangeImage(ad1)}>button 2</button>
        <button onClick={() => ChangeImage(ad2)}>button 3</button>
        <button onClick={() => ChangeImage(ad3)}>button 1</button>
        <button onClick={() => ChangeImage(ad4)}>button 4</button>
        </div> 
    </div>
  )
}

这样代码更简洁，也符合React的单向数据流理念，不需要手动操作DOM。

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