React处理Promise设置状态时报setBackground不是函数错误

你误判了问题来源，这个setBackground is not a function报错和Promise处理逻辑无关，核心原因是你在父组件调用Background组件时，没有正确传入名为setBackground的函数类型prop，常见错误场景包括：

• 渲染<Background />时漏写setBackground传参
• 传参时变量名拼写错误，比如把setBackground写成setbackground、setBg之类和子组件解构名不匹配的名字
• 传入的setBackground不是React useState返回的setter函数，是其他类型的值

除此之外你的代码还存在4个会导致后续运行异常的隐藏问题：

1. 渲染判断逻辑错误：如果background是接口返回的对象类型，对象不存在length属性，background.length的判断结果永远为falsy，图片永远不会渲染
2. 标签使用错误：JSX中不存在<image>标签，标准图片标签为自闭合的<img>
3. 逻辑和注释不符：注释说明需要页面加载时自动请求背景图，但当前代码只有点击按钮才会触发请求，缺少挂载阶段的副作用调用
4. 缺少异常捕获：fetch请求没有错误处理逻辑，接口报错时会抛出未捕获的Promise异常

1. 先修正父组件传参
   确保父组件中用useState定义背景状态，且渲染Background组件时把状态值和对应的setter完整、名称正确地传入，参考写法：

import { useState } from 'react'
import Background from './Background'

export default function App() {
  // 初始值设为null，方便判断是否已获取到接口数据
  const [background, setBackground] = useState(null)

  return (
    <div>
      {/* 两个prop名称必须和子组件解构的名称完全一致 */}
      <Background 
        background={background} 
        setBackground={setBackground} 
      />
    </div>
  )
}

2. 修正子组件的逻辑错误，完整修正后的代码如下：

import { useEffect } from 'react'

export const Background = ({background, setBackground}) => {
  const backgroundQuery = async () => { 
    try {
      const query = "https://api.scryfall.com/cards/random?q=%28type%3Aland%29+is%3Aartcrop"
      const response = await fetch(query);
      if (!response.ok) throw new Error('接口请求异常')
      const data = await response.json();
      setBackground(data);
    } catch (err) {
      console.error('获取背景图失败：', err)
    }
  }

  // 组件挂载时自动触发一次请求，匹配页面加载即获取图的需求
  useEffect(() => {
    backgroundQuery()
  }, [])

  return(
    <div>
      {/* 用真值判断替代length判断，使用正确的img自闭合标签 */}
      {background && <img src={background.image_uris.art_crop} alt="background image, basic full art mtg land" />}
      <button onClick={backgroundQuery}> Get Image </button>
    </div>
  )
};

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