更改道具时未渲染React js子组件

Question

在这里反应菜鸟。 我有这个组件，用于显示从API调用中获取的宠物小精灵列表。 我有这个保管箱，可以将region状态更改为选中状态，并通过API通过区域获取数据（宠物小精灵）列表。 传递给number子组件的PokeCard道具是我将在该组件中获取的相应口袋妖怪编号。

我面临的问题是，在我第一次更改区域之后，我将获得正确的数据列表，但是在此之后更改区域将不会呈现想要的列表（来自第一个更改区域的列表将持续存在），尽管我正在传递将number正确地当作道具（我在console.log组件中使用PokeCard进行了检查）。我不知道React如何深深地渲染组件（也没有适当的“实践”），所以我想知道React是否在执行之后没有执行renderedPokemonList部分。如果未执行，该如何解决？

谢谢！

handleChangeRegion = (SelectedRegion) => {
    let pokedexNum = 0;
    switch(SelectedRegion) {
        case "National":
            this.setState({
                region: "National",
            })
            pokedexNum = 1;
            break;
        case "Kanto":
            this.setState({
                region: "Kanto",
            })
            pokedexNum = 2;
            break;
        case "Johto":
            this.setState({
                region: "Johto",
            })
            pokedexNum = 3;
            break;
        case "Hoenn":
            this.setState({
                region: "Hoenn",
            })
            pokedexNum = 4;
            break;
        case "Sinnoh":
            this.setState({
                region: "Sinnoh",
            })
            pokedexNum = 5;
            break;
        case "Unova":
            this.setState({
                region: "Unova",
            })
            pokedexNum = 9;
            break;
        case "Central Kalos":
            this.setState({
                region: "Central Kalos",
            })
            pokedexNum = 12;
            break;
        case "Coastal Kalos":
            this.setState({
                region: "Coastal Kalos",
            })
            pokedexNum = 13;
            break;
        case "Mountain Kalos":
            this.setState({
                region: "Mountain Kalos",
            })
            pokedexNum = 14;
            break;
        case "Alola":
            this.setState({
                region: "Alola",
            })
            pokedexNum = 21;
            break;
        default:
            this.setState({
                region: "National",
            })
            pokedexNum = 1;
            break;
    }
    let url = "https://pokeapi.co/api/v2/pokedex/" + String(pokedexNum) + "/"
    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data) {
                this.setState({pokemons: data.pokemon_entries}, () => {})
            }
        })
        .catch(console.log)
}

render() {
  const renderedPokemonList = this.state.pokemons.map((pokemon, idx) => {
    return (
      <div key={pokemon.entry_number}>
        <div>
          <PokeCard number={pokemon.pokemon_species.url.slice(42, -1)}></PokeCard>
        </div>
      </div>
    );
  });

  return (
    <Container>
      <div>
        <ButtonDropdown>
          <Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle} >
            <DropdownToggle color="primary" caret>
              {this.state.region}
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem onClick={() => this.handleChangeRegion("National")} dropdownvalue="National">National</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Kanto")} dropdownvalue="Kanto">Kanto</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Johto")} dropdownvalue="Johto">Johto</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Hoenn")} dropdownvalue="Hoenn">Hoenn</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Sinnoh")} dropdownvalue="Sinnoh">Sinnoh</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Unova")} dropdownvalue="Unova">Unova</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Central Kalos")} dropdownvalue="Central Kalos">Central Kalos</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Coastal Kalos")} dropdownvalue="Coastal Kalos">Coastal Kalos</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Mountain Kalos")} dropdownvalue="Mountain Kalos">Mountain Kalos</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Alola")} dropdownvalue="Alola">Alola</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </ButtonDropdown>
      </div>
      <div>
        {renderedPokemonList}
      </div>
    </Container>
  );
}

+++实际上是在进行一些调试（console.log在PokeCard子组件中传递的道具）之后，我发现在更改区域时，它不会修改第一个区域的数据，但会填充其他数据。例如，当我首先选择区域关东（包含151个条目）时，state.pokemons将充满151个关东口袋妖怪的数组，然后将区域更改为Alola（包含403个条目）时，state.pokemons将保留前151个关东的宠物小精灵，其余将充满阿罗拉的宠物小精灵。我不明白这是怎么回事...