Question

当我单击卡时，loadAboutInfo函数将通过该函数将数据传输到另一个组件并在其中显示。但是，如果我再次单击同一张卡，则它是重复的。我该如何解决？我已经检查了哪个卡号，然后是否与渲染相同，但是再次单击它又渲染了一张卡，但是我需要它是否已经存在，而不是新卡不能渲染

"Error: The 'Price' property on 'MealItem' could not be set to a 'System.Double' value. You must set this property to a non-null value of type."

我在其中获取数据的组件

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>
        );
    }
}

Answer 1

在loadAboutInfo上，您可以检查pokemonValue数组上是否已经有一个具有相同ID的神奇宝贝，如下所示：

loadAboutInfo = (pokemonValue,pockemonImg,pokemonId) => {
    // this will get the first element that matches the id
    const exists = this.state.pokemonValue.find(pokemon => pokemon.id === pokemonId)

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

因此，只有在所单击的口袋妖怪不在pokemonValue数组中时，它才会更新状态

点击重新呈现组件如何反应

1 个答案: