Jsx没有正确显示道具

Question

我正在通过创建应用程序来学习反应，但我的代码中有一个奇怪的问题，有人可以指出错误吗？感谢

 test=()=>{
        console.log('filtered card: ',this.state.cards.filter(c=>c.id===this.state.idToDelete)[0].name)

    }

当我使用这个函数来测试代码行时，它工作正常并且在我点击时正确显示所有名称但是当我应用该行进行渲染时所以我可以将名称放入我的Jsx中给我错误？

    const warningCard=this.state.idToDelete && this.state.cards.filter(c=>c.id===this.state.idToDelete)[0].name.toUpperCase()
    return(
        <div>

        <button onClick={this.test}>test</button>
        <button onClick={()=>this.setState({showForm:!this.state.showForm})}>form</button>
        <button onClick={()=>this.setState({showEditForm:false})}>close edit from</button>

        <h2>you have {this.state.cards.length} {card}</h2>

        {this.state.showWarning && 
        <div>
            <h2>ARE YOU SURE YOU WANT TO DELETE THIS {warningCard} CARD?</h2>

这是图片

当我使用console.log并注释掉warningCard时，所有卡片都正确显示了他们的名字，但是当我添加warningCard行时，我有这个错误

如果有帮助的话，这是我的全部内容

import React from 'react';
import CardList from './cardList';
import CardForm from './cardForm';

    class FlashCardMainPage extends React.Component{
        constructor(){
            super();
            this.state={
                cards:[
                    {...},
                    {...},
                    {...}],
                nextId:3,
                showForm:false,
                showEditForm:false,
                cardToEdit:{},
                showWarning:false,
                confirm:false,
                idToDelete:''
            }
        }

        onCardClick=(id)=>{
            const {cards}=this.state
            const newCardsState=this.state.cards.map((c)=> c.id===id ? {...c,showInfo:!c.showInfo} : c)
            this.setState({cards:newCardsState})
        }

        deleteCard=(id)=>{
            this.setState({showWarning:true})
            this.setState({idToDelete:id})
        }

        editCard=(id)=>{
            const cardToEdit = this.state.cards.filter(c=>c.id===id)
            this.setState({cardToEdit, showEditForm:true})
        }

        onFormSubmit=(cardFromSubmit)=>{
            const newCard={id:this.state.nextId,...cardFromSubmit}
            this.setState({
                cards:[...this.state.cards,newCard], 
                nextId:this.state.nextId+1,
                cardToEdit:{},
                showForm:false
            })
        }

        onEditCardSubmit=(editedCard)=>{
            this.setState({showEditForm:false})
            const cards=this.state.cards.map((c)=>c.id===this.state.cardToEdit[0].id?c={id:c.id,...editedCard}:c)
            this.setState({cards})
        }

        onCloseForm=()=>{
            this.setState({showForm:false, showEditForm:false})
        }

        test=()=>{
            console.log('filtered card: ',this.state.cards.filter(c=>c.id===this.state.idToDelete)[0].name)

        }

        onConfirm=(pass)=>{
            const check=pass
            if(pass){
                const cards=this.state.cards.filter(c=>c.id!==this.state.idToDelete)
                this.setState({cards, showWarning:false}) 
            }else
                this.setState({showWarning:false})
        }

        render(){
            const card=this.state.cards.length===1?'card':'cards'
            const filteredCards = this.state.idToDelete && this.state.cards.filter(c=>c.id===this.state.idToDelete);  
            const warningCard = filteredCards[0] && filteredCards[0].name.toUpperCase();
            return(
                <div>

                    <button onClick={this.test}>test</button>
                    <button onClick={()=>this.setState({showForm:!this.state.showForm})}>form</button>
                    <button onClick={()=>this.setState({showEditForm:false})}>close edit from</button>

                    <h2>you have {this.state.cards.length} {card}</h2>

                    {this.state.showWarning && 
                    <div>
                        <h2>ARE YOU SURE YOU WANT TO DELETE THIS {warningCard} CARD?</h2>
                        <button onClick={()=>this.onConfirm(true)}>Yes</button>
                        <button onClick={()=>this.onConfirm(false)}>No</button>
                    </div>
                    }

                    {this.state.showForm &&
                        <CardForm
                        cardSave={this.onFormSubmit}
                        closeForm={this.onCloseForm}
                        />
                    }

                    {this.state.showEditForm &&
                        <CardForm
                        editCardSave={this.onEditCardSubmit}
                        cardToEdit={this.state.cardToEdit}
                        closeForm={this.onCloseForm}
                        editStatus={this.state.showEditForm}
                        />
                    }

                    <CardList
                        cards={this.state.cards}
                        cardClick={this.onCardClick}
                        deleteCard={this.deleteCard}
                        editCard={this.editCard}
                    />

                </div>
            )
        }
    }

    export default FlashCardMainPage

Answer 1

我认为有些警卫可能会帮助你。如果您尝试将第一行更改为两行怎么办？

const filteredCards = this.state.idToDelete && this.state.cards.filter(c=>c.id===this.state.idToDelete);  
const warningCard = filteredCards[0] && filteredCards[0].name.toUpperCase();