React组件传值异常：Pokémon搜索数据无法传递至展示组件

问题分析 #

• Props命名与访问逻辑混乱：Search组件传递props时用了props={userData}，类组件里通过props.props访问既不直观，且将props存入state后，props更新时state不会自动同步。
• 初始状态类型不匹配：Search组件中userData初始值设为数组[]，但API返回的是单个宝可梦对象，类型不匹配会引发渲染异常。
• 直接渲染对象：PokiApi组件直接输出{this.state.data}，React无法解析对象，会显示[object Object]。
• 缺少错误处理：输入无效宝可梦名称时，fetch请求会抛出错误，没有捕获处理逻辑。

修复后的代码 #

Search组件（函数组件） #

const Search = () => {
  const [inputValue, setInputValue] = useState("");
  // 初始值改为null，匹配API返回的对象类型
  const [userData, setUserData] = useState(null);
  // 新增错误状态，处理请求失败场景
  const [error, setError] = useState(null);

  const userInput = (e) => {
    setInputValue(e.target.value);
    // 输入时清空之前的错误和数据
    setError(null);
    setUserData(null);
  };

  const handleClick = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return; // 空输入不发起请求
    apiCall(inputValue.toLowerCase()); // 转为小写，匹配API命名规则
  };

  const apiCall = async (name) => {
    try {
      const url = `https://pokeapi.co/api/v2/pokemon/${name}`;
      const response = await fetch(url);
      if (!response.ok) throw new Error("宝可梦不存在");
      const data = await response.json();
      setUserData(data);
    } catch (err) {
      setError(err.message);
      setUserData(null);
    }
  };

  return (
    <div>
      <button className="btn" onClick={handleClick}>
        Search
      </button>
      <input
        type="search"
        onChange={userInput}
        value={inputValue}
        placeholder="输入宝可梦名称"
        className="btn-search"
      />
      {/* 显示错误提示 */}
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <div>
        {/* 用有意义的名称传递props */}
        <PokiApi pokemonData={userData} />
      </div>
    </div>
  );
};

PokiApi组件（类组件优化） #

export default class PokiApi extends React.Component {
  render() {
    const { pokemonData } = this.props;
    // 数据未加载时显示提示
    if (!pokemonData) return <div>请搜索一个宝可梦</div>;

    return (
      <div className="pokemon-card">
        <h2>{pokemonData.name.charAt(0).toUpperCase() + pokemonData.name.slice(1)}</h2>
        <img 
          src={pokemonData.sprites.front_default} 
          alt={pokemonData.name}
          style={{ width: '200px', height: '200px' }}
        />
        <h3>基础属性</h3>
        <ul>
          {pokemonData.stats.map((stat, index) => (
            <li key={index}>
              {stat.stat.name}: {stat.base_stat}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

关键修复点说明 #

• 规范Props命名：将传递的props命名为pokemonData，类组件直接通过this.props.pokemonData访问，无需存入state（避免props更新时state不同步）。
• 修正初始状态：userData初始值设为null，与API返回的对象类型匹配，渲染时可通过判断!pokemonData显示加载提示。
• 优化对象渲染：提取宝可梦的具体属性（名称、图片、属性值）进行渲染，避免直接输出对象导致的[object Object]问题。
• 添加错误处理：用try/catch捕获API请求错误，显示友好提示；同时过滤空输入，避免无效请求。
• 兼容大小写：将用户输入转为小写，匹配API的命名规则（比如输入"Pikachu"转为"pikachu"）。

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