ReactJS父子组件功能实现遇问题，寻求技术解决方案

一、现有代码的问题 #

• 拼写错误：setAbillity 应为 setAbility，状态变量名需统一为 ability
• 初始状态错误：ability 初始设为空字符串，直接访问 ability.power 会触发TypeError，应初始化为空对象 {}
• 数据访问错误：Pokemon API返回的能力数据在 res.data.abilities 数组中，不存在直接的 power 属性，需遍历数组获取具体信息

二、重构为父子组件实现 #

将代码拆分为两个组件，实现父子组件通信：

• 父组件 App：管理输入状态、发起API请求、存储数据
• 子组件 PokemonAbilities：接收父组件传递的数据并负责渲染

完整代码实现 #

import './App.css';
import Axios from 'axios'
import { useState } from 'react';

// 子组件：展示宝可梦能力列表
function PokemonAbilities({ abilities }) {
  if (!abilities || abilities.length === 0) {
    return <h1>请输入宝可梦名称并点击查询</h1>;
  }

  return (
    <div>
      <h2>能力列表：</h2>
      <ul>
        {abilities.map((item, index) => (
          <li key={index}>
            {item.ability.name} - 隐藏状态：{item.is_hidden ? '是' : '否'}
          </li>
        ))}
      </ul>
    </div>
  );
}

// 父组件：处理输入和API请求逻辑
function App() {
  const [pokeName, setPokeName] = useState("")
  const [abilities, setAbilities] = useState([])

  const fetchPokemonData = () => {
    if (!pokeName.trim()) return;
    
    Axios.get(`https://pokeapi.co/api/v2/pokemon/${pokeName}`)
      .then((res) => {
        setAbilities(res.data.abilities);
      })
      .catch(err => {
        console.error('获取数据失败：', err);
        alert('未找到该宝可梦，请检查名称');
        setAbilities([]);
      });
  }
  
  return (
    <div className="App">
      <input 
        placeholder='输入宝可梦名称...' 
        onChange={(event) => setPokeName(event.target.value.toLowerCase())} 
      />
      <br /><br />
      <button onClick={fetchPokemonData}>查询</button>
      <br /><br />
      {/* 父组件通过props向子组件传递数据 */}
      <PokemonAbilities abilities={abilities} />
    </div>
  );
}

export default App;

三、父子组件核心能力说明 #

• 父传子通信：父组件App将abilities状态通过abilities={abilities}传递给子组件，子组件通过({ abilities })解构props接收数据
• 子组件独立渲染：子组件内部处理数据为空的边界情况，避免报错，同时遍历能力数组渲染列表
• 错误处理优化：新增API请求失败的捕获逻辑，提升用户体验

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