React中通过state从根组件向子组件传递图片页面空白如何解决

你的页面崩溃、图片传递失效由3个核心错误导致：

• 未导入useState钩子，运行时直接抛出引用错误。
• 在函数组件渲染顶层直接调用状态更新方法setPokeName/setPokeImage/setPokeAttack，触发「渲染→调用setState→重渲染→再次调用setState」的无限循环，直接导致页面崩溃空白。
• 动态引入图片的写法不符合webpack静态解析规则，在多数React脚手架环境下无法正确匹配资源；CRA4+版本中require本地图片会返回模块对象，直接传给src属性会拿到对象而非图片地址字符串，导致图片加载失败。

方案1：修正现有逻辑（保留动态传图片名的写法） #

首先修复App.js的逻辑：

1. 补全useState的导入
2. 把固定值直接作为useState的初始参数，禁止在组件顶层直接调用状态更新函数

修正后的App.js代码：

// 必须导入useState
import { useState } from "react";
import PokemonCard from "./components/PokemonCard";

function App() {
  // 初始值直接传入useState，不要在顶层单独调用set方法
  const [pokeName, setPokeName] = useState("Bellsprout");
  const [pokeImage, setPokeImage] = useState("bellsprout.png");
  const [pokeAttack, setPokeAttack] = useState("25");

  return (
    <div>
      <PokemonCard name={pokeName} image={pokeImage} attack={pokeAttack} />
    </div>
  );
}

export default App;

然后修正PokemonCard.js的图片引入逻辑，补全require的default属性，适配webpack解析规则：

const PokemonCard = (props) => {
    return (    
        <div>
            <h1>{props.name}</h1>
            <img 
              // 固定目录前缀，让webpack可以正确扫描assets下的文件，取default属性拿到实际图片地址
              src={require(`../assets/${props.image}`).default} 
              alt={props.name}
            />
            <h1>{props.attack}</h1>
        </div>
    );
}

export default PokemonCard;

方案2：提前导入图片（更稳妥，无动态引入兼容问题） #

如果不需要动态切换大量本地图片，推荐直接在父组件提前导入图片资源，再作为props传递，完全规避动态require的解析问题。
App.js调整如下：

import { useState } from "react";
import PokemonCard from "./components/PokemonCard";
// 直接导入本地图片
import bellsproutImg from "./assets/bellsprout.png";

function App() {
  const [pokeName, setPokeName] = useState("Bellsprout");
  // 把导入的图片对象作为状态值
  const [pokeImage, setPokeImage] = useState(bellsproutImg);
  const [pokeAttack, setPokeAttack] = useState("25");

  return (
    <div>
      <PokemonCard name={pokeName} image={pokeImage} attack={pokeAttack} />
    </div>
  );
}

export default App;

对应PokemonCard.js不需要再写require，直接使用传入的图片地址即可：

const PokemonCard = (props) => {
    return (    
        <div>
            <h1>{props.name}</h1>
            <img src={props.image} alt={props.name} />
            <h1>{props.attack}</h1>
        </div>
    );
}

export default PokemonCard;

注意：所有状态更新方法（setXxx）只能放在事件回调、useEffect副作用钩子这类非渲染顶层的位置执行，否则必然触发无限重渲染。

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