Next.js中如何将getStaticProps获取的API数据传递至组件？

问题定位 #

你之前的核心问题有两个：

• 父组件AllPokemons渲染SearchPoke时没有传递任何props，导致子组件接收的参数为空
• 错误使用router.asPath尝试获取业务数据，router仅用于路由相关操作，无法实现组件间的数据传递

具体修复步骤 #

1. 父组件传递宝可梦数据 #

修改AllPokemons组件中SearchPoke的调用，将getStaticProps获取到的pokemons数组通过props传递给子组件：

export default function AllPokemons({ pokemons }) {
  return (
    <div>
      {/* 传递pokemons数组给SearchPoke组件 */}
      <SearchPoke pokemons={pokemons} />
      <div className={styles.title_container}>
        <h1>
          Poke<span>Next</span>
        </h1>
        <Image
          src="/image/pokebola.png"
          alt="pokebola"
          width={50}
          height={50}
        />
      </div>

      <div className={styles.pokemon_container}>
        {pokemons.map((pokemon) => (
          <Card key={pokemon.id} pokemon={pokemon} />
        ))}
      </div>
    </div>
  );
}

2. 子组件实现搜索功能 #

修改SearchPoke组件，接收pokemons props，通过状态管理搜索关键词并实现数据过滤：

import { useState } from 'react';

export default function SearchPoke({ pokemons }) {
  const [searchTerm, setSearchTerm] = useState('');
  // 根据输入关键词过滤宝可梦数据（不区分大小写）
  const filteredPokemons = pokemons.filter(pokemon => 
    pokemon.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="搜索宝可梦..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      {/* 可选：渲染搜索结果列表 */}
      <div className="search-results">
        {filteredPokemons.map(pokemon => (
          <div key={pokemon.id}>{pokemon.name}</div>
        ))}
      </div>
    </div>
  );
}

补充说明 #

• 如果后续需要在多个组件共享宝可梦数据，可以考虑使用React Context或者状态管理库（如Redux），避免多层props传递的繁琐
• getStaticProps返回的props仅能传递给页面组件，页面组件再向下传递给子组件是Next.js中标准的数据流方式

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