React组件间共享类组件state？PokeDex开发遇访问问题

首先来说你遇到的第一个错误：TypeError: Cannot read property 'state' of undefined，这个问题大概率是因为你在函数组件PokeList里错误地尝试用this.state去访问PokemonList类组件的状态，或者没有把PokemonList的状态正确通过props传递给PokeList。

函数组件本身没有this上下文，而且React里组件之间的状态共享需要通过props向下传递，不能直接跨组件访问其他组件的state。咱们一步步来修正：

步骤1：正确传递Pokemon数据给PokeList #

在你的PokemonList类组件里，渲染PokeList的时候，要把存储在state里的Pokemon数据作为props传过去：

// PokemonList类组件的render方法里
render() {
  return (
    <div>
      <PokeList pokemons={this.state.pokemons} />
    </div>
  );
}

步骤2：在PokeList函数组件里接收并使用props #

函数组件通过参数接收props，所以修改PokeList，直接从参数里拿pokemons数据，不要再用this.state：

function PokeList({ pokemons }) {
  // 这里直接使用pokemons数组
  return (
    <div className="poke-list">
      {pokemons.map(pokemon => (
        // 这里渲染你的Pokemon卡片，比如：
        <div key={pokemon.id} className="poke-card">
          <h3>{pokemon.name}</h3>
          <img src={pokemon.sprites.front_default} alt={pokemon.name} />
        </div>
      ))}
    </div>
  );
}

接下来解决“能获取20条数据但无法渲染卡片”的问题，除了上面的props传递，还要检查这几点：

• 确认PokemonList的state里pokemons确实是一个数组，而且获取API数据后正确更新了state。比如在API请求成功后：

  fetchPokemons = async () => {
    const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20');
    const data = await response.json();
    // 注意：PokeApi返回的results里只有name和url，如果你需要更多信息（比如id、精灵图），可能需要再请求每个精灵的详情
    const pokemonDetails = await Promise.all(data.results.map(async (pokemon) => {
      const res = await fetch(pokemon.url);
      return await res.json();
    }));
    this.setState({ pokemons: pokemonDetails });
  }
  

• 检查PokeList里的map循环有没有正确设置key（必须是唯一值，比如精灵的id），没有key的话React可能不会正确渲染列表。
• 确认你的CSS样式没有把卡片隐藏掉，比如有没有设置display: none或者其他导致卡片不可见的样式。

另外，还要注意类组件里的方法绑定问题：如果你的fetchPokemons是类里的方法，要确保在constructor里绑定this，或者用箭头函数定义方法，避免this指向错误导致state更新失败：

class PokemonList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { pokemons: [] };
    // 绑定this
    this.fetchPokemons = this.fetchPokemons.bind(this);
  }

  // 或者用箭头函数定义方法，自动绑定this
  fetchPokemons = async () => {
    // 你的API请求代码
  }

  componentDidMount() {
    this.fetchPokemons();
  }
}

按照这些步骤调整后，应该就能解决你的问题了——既不会出现state访问错误，也能正确渲染出Pokemon卡片。

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