reactjs - 当我从列表中选择新链接时，反应子功能类不会重新呈现

Question

当我尝试单击新级别的新链接时，口袋妖怪名称将更新，但关联能力组件不会更新。注意到在第二次链接点击时不会触发 fetch 方法。

这是子类

import React, { useState, useEffect } from "react";

import { Link, useLocation} from "react-router-dom";
import "./Abilities.scss"


let Ability = () => {
    useEffect(()=> {fetchAbilities().then(r =>
        console.log("got getting ability"))
    ;},[])
    let props = useLocation();
    // @ts-ignore
    let url = props.state.item.url;
    let [abilities, setAbilities] = useState([]);

    let fetchAbilities= async () => {
        let data = await fetch(url);
        let items = await data.json();
        let abilities1 = items.abilities;
        let denormalized = {
            "name":"",
            "abilities": []
        }
        for(let i = 0; i< abilities1.length; i++){
            let abilityUrl = abilities1[i].ability.url
            let response = await fetch(abilityUrl);
            let promise = await response.json();
            denormalized.name = promise.names;
            // @ts-ignore
            denormalized.abilities.push(promise)
        }
        // @ts-ignore
        setAbilities(denormalized);
    }
    // @ts-ignore
    let getAbilities =(ability)=> {
        let a =<div>
            <div>
                {ability.name}
            </div>
        </div>
        return a;
    }
    // @ts-ignore
    let getAbiltiesFromPokeom = (poke) => {
        let abilities = poke.pokemon.abilities;
        console.log(abilities);
        let li =
            <li className="listItems">
                {(abilities|| []).map((a : any)=>getAbilities(a))}

            </li>
        return li;
    };

    // @ts-ignore
    let abilityName = <>{abilities.name}</>;
    // @ts-ignore
    let effectEntries = <>{abilities.effect_entries}</>;
    let getAbilitInfo =(a: any)=> {
        let div = <div>{a.name}</div>
        //a.abilities[0].effect_changes[0].effect_entries[1]
        let col = [];
        let ab = 0;
        if(a.abilities != undefined ) {
            if(a.abilities.length>0 ) {
                for (let i = 0; i < a.abilities.length; i++) {
                    try {
                        let effectEntry = a.abilities[i].effect_entries[0].effect;
                        let name = a.abilities[1].name
                        let items =
                            <div>
                                <div>
                                    <p>{name}</p>
                                </div>
                                <div>{effectEntry}</div>
                            </div>
                        col.push(items);
                    }
                    catch (e){

                    }
                }
            }
        }
        let div1 = <div>
            <div>
                {col}
            </div>
        </div>;
        return div1
    }
    return <div className="abilities">
        {getAbilitInfo(abilities)}
    </div>
}
export default Ability;

桥牌班

import React, {Component, useState, useEffect } from "react";
import "./Pokemon.scss"
import {BrowserRouter as Router, Link, Route, useLocation, useHistory} from "react-router-dom";
import Ability from "../abilities/Ability";


let Pokemon = () => {
    useEffect(()=> {fetchItems().then(r =>
        console.log("got pokemon details"))
    ;},[])
    let props = useLocation();

    // @ts-ignore
    let url = props.state.item.url;
    let [pokemon, setPokemon] = useState([]);


    let fetchItems = async () => {
        let data = await fetch(url);
        let items = await data.json();
        setPokemon(items);
    }

// @ts-ignore
    let getAbilities =(ability)=> {
        setPokemon(ability)
        let a =
            <Link id={ability.name + "-"}
                  to={{pathname :"/component/abilities/Ability",
                      state: {ability}}}>
            </Link>
        // <Ability ability = {ability}/>
        return a;
    }
    // @ts-ignore
    let getAbiltiesFromPokeom = (poke) => {
        let abilities = poke.pokemon.abilities;
        console.log(abilities);
        let li =
            <li className="listItems">
            {(abilities|| []).map((a : any)=>getAbilities(a))}

        </li>
        return li;
    };
    // @ts-ignore
    let p = <>{props.state.item.name}</>;
    let div = <div >

        <div id="a" >
            <div>
                <p className="poke">{p}</p>
            </div>
            <p className="poke">
                <ul>
                    {getAbiltiesFromPokeom({pokemon})}
                    <Route path="/components/:repo" component={Ability} />
                </ul>
            </p>

        </div>
    </div>;
    return div
};
export default Pokemon;

专利类

import React, {Component, useState, useEffect} from "react";
import "./LeftHandNav.scss"
import {BrowserRouter as Router, Route, Link , useHistory} from "react-router-dom";
import Pokemon from "./pokemon/Pokemon";
import Ability from "./abilities/Ability";

function LeftHandNav() {
    useEffect(()=> {fetchItems();},[]);
    // @ts-ignore
    let url = "https://pokeapi.co/api/v2/pokemon/";
    let [items, setItems] = useState([])

    let fetchItems= async ()=> {
        let data = await fetch(url);
        let items = await data.json();
        setItems(items.results);
    }


    function getLi(item:any, id:number) {
        let li =
            <Link id={item.name + "-" + id}
                  to={{pathname :"/components/pokemon/Pokemon/"+item.name,
                  state: {item}}}
                  >
                <li className="listItems" key={id}>
                    <div className="listItems">
                        {item.name}
                    </div>
                </li>
            </Link>
        return li;
    }
    let id = 0;
    let div =
        <div>
            <div className="hbox">
                <Router>
                    <div id="pokemonNav" >
                        <ul className="listItems">
                            <div>
                                <p>Pokemon</p>
                            </div>
                            {items.map(item =>getLi(item, ++id))}
                        </ul>
                    </div>
                    <div>
                        <Route path="/components/pokemon/" component={Pokemon} />
                    </div>


                </Router>;
            </div>;
        </div>

    return div
}
export default LeftHandNav;

我如何强制它再次调用它？我添加了 onBlur 以再次异步调用 fetch 以更新状态，但到目前为止还没有运气

标签： reactjs