0

При клике на карточку у меня срабатывает функция loadAboutInfo через которую я передаю данные в другой компонент и там их вывожу. Но если я два раза нажму на одну и ту же карточку то она дублируется.Как я могу это исправить?

        loadAboutInfo=(pokemonValue,pockemonImg,pokemonId)=>{
            this.setState(prevState => ({
                pokemonValue:[...prevState.pokemonValue, pokemonValue],
                pockemonImg,
                pokemonId
            }))
        }

    render() {
        return (                    
            <div className="wrapper">
                <div className="pokemonlist__inner__cards">
                    <div className="pokemonlist__cards">
                        {this.state.pokemonList.map((value,index)=>{
                            let pokemonImgTemplate = this.state.pokemonImgTemplate;
                            let pokemonId = value.id;
                            let pockemonImg = pokemonImgTemplate.replace('{id}',pokemonId);
                            return(
                                <div className="pokemonListCard" key={index} onClick={()=>this.loadAboutInfo(value,pockemonImg,pokemonId)}>
                                        <PokemonCard 
                                            pockemonImg={pockemonImg}
                                            pokemonName={value.name}
                                            pokemonTypes={value.types}
                                        />
                            </div>
                            )
                        })}
                    </div>
                    <PokemonLoadMore 
                        loadMore={this.loadMore}
                        currentPage={this.state.currentPage}
                    />
                </div>
            </div>
        );
    }
}

Компонент где вывожу данные

render() {
        return (
            <div className="pokemon__about">
                {this.props.pokemonValue.map((value,index)=>{
                   let totalMoves = value.moves.length;
                    return(
                        <div className="pokemon__about__wrapper" key={index}>
                            {this.props.pokemonId == value.id ?
                                <div className="pokemon__about__inner" key={index}>
                                    <AboutImage 
                                        pockemonImg={this.props.pockemonImg}
                                    />
                                    <AboutName
                                        pockemonName={value.name}
                                    />
                                    <div className="pokemon__about__table">
                                            <AboutPokemonTypes 
                                                pokemonTypes={value.types}
                                                />
                                                <table>
                                            <AboutPokemonWeight 
                                                pockemonWeight={value.weight}
                                            />
                                            <AboutPokemonMoves 
                                                totalMoves={totalMoves}
                                            />
                                        </table>
                                    </div>
                                </div>
                                :
                                null
                            }
                        </div>
                    )
                })}
            </div>
        );
    }
}

Спасибо за ответы

1 ответ 1

0

Добавить проверку нового покемона, является ли он так же последним. Если да то вернуть старый стейт. Если нет вернуть новый стейт.

loadAboutInfo=(pokemonValue,pockemonImg,pokemonId)=>{         
     this.setState(prevState => {
         if (pokemonValue === prevState.pokemonValue[prevState.pokemonValue.length-1]) {
             return PrevState
         }
          return {
            pokemonValue:[...prevState.pokemonValue, pokemonValue],
            pockemonImg,
            pokemonId
        }
       }
      )
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.