Блог

Я использую Ionic React для разработки веб-приложения. Поскольку я новичок в этом, я сталкиваюсь с несколькими проблемами здесь и там. Один из которых я не смог исправить.

У меня есть компонент TeamLogo, который должен отображать изображение после его извлечения из моего rest api. Однако представление / изображение, похоже, не обновляется должным образом каждый раз. Поэтому в некоторых случаях я просто получаю логотип по умолчанию. Если я перенаправлю / переключусь на другую страницу, а затем вернусь, он отобразит правильный логотип. Как только я перезагружаю страницу, она возвращается к логотипу по умолчанию. Что я делаю не так? Я пробовал без логотипа по умолчанию, тогда он просто пустой, и ничего не отображается даже в html. Таким образом, логотип по умолчанию предназначен только для визуализации / отладки. У меня была эта проблема в прошлом, но я смог ее исправить, обернув TeamLogo внутриФрагмент>. Однако на этот раз это не сработает, и я действительно понятия не имею, почему это вообще работало в прошлом. Почему он не выполняется повторно? Мой код выглядит так:

 export const TeamLogo: React.FC<TeamLogoProps> = ({teamId, width}) => {
    const [teamData, setTeamData] = useState<any>(null);

    console.log('trying data from '   teamId);

    useEffect(() => {
        if (!teamData || teamData.id != teamId) {
            fetchTeam(teamId, (data) => {
                setTeamData(data);
                console.log('fetched data from '   data.name   " "   teamId);
            });
        } else {
            console.log('Had existing data for '   teamData.name  " "   teamId)
        }
    });
    
    if(teamData != null) {
        return (
           <img className={teamData.name} width={width   "px"} src={"data:image/png;base64,"   teamData?.baseLogo}/>
        );
    } else {
        return <img className="NRG Esports" src="data:image/png;base64,defaultBase64..." width="50px"/>
    }
};
  

И я использую его так:

     function getScoreTeamNameEntry(showScore: boolean, team: any) {
    return (
        <div className={(showScore ? "" : "hidden-keep-size ")   "name-entry"}>
        {team.id ? (<Link className="float-right" to={"/team/"   team.id}>
            <React.Fragment><TeamLogo width={50} teamId={team.id}/></React.Fragment>
            <IonLabel className={"color-contrast"}>{team.name}</IonLabel>
        </Link>) : <IonLabel className={"color-contrast"}>{team.name}</IonLabel>}
    </div>);
}
  

Любая помощь приветствуется!

РЕДАКТИРОВАТЬ: я немного поиграл с ним и смог обойти проблему, но это все еще очень странно. Вот что я узнал:

              <div className="participant winner">
                    {
                        getPlaceholderEntry(teamData, id)
                    }
                </div>
  

Теперь я передаю идентификатор вместо TeamData только для того, чтобы логотип мог загружаться из единственного идентификатора команды, и ему не нужно ждать загрузки TeamData.
Теперь getPlaceholderEntry просто делает это:

 function getPlaceholderEntry(team: any, teamId: any) {
    console.log("Placeholder");
    return (
        <React.Fragment>
            {
               getScoreTeamNameEntry(true, team, teamId)
            }
        </React.Fragment>)
}
  

Однако замена вызова getPlaceholderEntry на прямой

 <React.Fragment>
        {
           getScoreTeamNameEntry(true, team, teamId)
        }
    </React.Fragment>)
  

по какой-то причине он снова не отображает / не обновляет его.
Также добавляется любое условие, например

       <div className="participant winner">
                    {
                        teamData amp;amp; getPlaceholderEntry(teamData, id)
                    }
                </div>
  

снова разбивает его. Есть идеи, что происходит?

 useEffect(() => {
... original code
},[teamData,teamData.id]);
  

вам необходимо добавить зависимости от useEffect, чтобы компонент повторно отображался при изменении данных

https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect