reactjs - 道具更改时未呈现React js子组件

Question

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

我面临的问题是，在我第一次更改区域后，我会得到正确的数据列表，但之后更改区域不会呈现想要的列表（来自第一个更改区域的列表将持续存在），尽管我number作为道具传递正确（我console.log在PokeCard组件内使用过它）。我不知道反应如何深度渲染组件（也不是正确的“实践”），所以我想知道反应是否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 个关东的口袋妖怪，其余的将充满了阿罗拉的口袋妖怪。我不明白这是怎么发生的......

标签： reactjsajaxrenderreact-state