Reactjs Jsx不能正确显示道具

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

 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>

const warningCard=this.state.idToDelete&&this.state.cards.filter（c=>c.id==this.state.idToDelete）[0]。name.toUpperCase（）
返回(
测试
this.setState（{showForm:！this.state.showForm}）}>form
this.setState（{showEditForm:false}}>close edit from
你有{this.state.cards.length}{card}
{this.state.showWarning&&
是否确实要删除此{警告卡}卡？

这是照片

当我使用console.log并注释掉警告卡时，所有卡都正确地显示了它们的名称，但是当我在中添加警告卡行时，出现了此错误

如果有帮助，这是我的全部组件

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

从“React”导入React；
从“/CardList”导入卡片列表；
从“/CardForm”导入CardForm；
类FlashCardMainPage扩展了React.Component{
构造函数（）{
超级（）；
这个州={
卡片：[
{...},
{...},
{...}],
下周三:，
展示形式：假，
showEditForm:false，
cardToEdit:{}，
警告：错误，
确认：假，
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}）
}
编辑卡=（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}
这是我的国家({
卡片：[…此.状态.卡片，新卡片]，
nextId:this.state.nextId+1，
cardToEdit:{}，
展示形式：假
})
}
onEditCardSubmit=（编辑卡）=>{
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}）
}
测试=（）=>{
console.log（'filteredcard:'，this.state.cards.filter（c=>c.id===this.state.idToDelete）[0].name）
}
onConfirm=（通过）=>{
常数检查=通过
如果（通过）{
const cards=this.state.cards.filter（c=>c.id！==this.state.idToDelete）
this.setState（{cards，showWarning:false}）
}否则
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（）；
返回(
测试
this.setState（{showForm:！this.state.showForm}）}>form
this.setState（{showEditForm:false}}>close edit from
你有{this.state.cards.length}{card}
{this.state.showWarning&&
是否确实要删除此{警告卡}卡？
this.onConfirm（true）}>是
this.onConfirm（false）}>否
}
{this.state.showForm&&
}
{this.state.showEditForm&&
}
)
}
}
导出默认FlashCardMainPage

我想一些警卫可能会帮你。如果你试着把第一行改成两行呢

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

---

这是一个非常不安全的操作

this.state.cards.filter（c=>c.id==this.state.idToDelete）[0]

，因为你怎么知道过滤器的结果不会是空的？所以它是空的，出于某种原因如果你能在这里创建一个你的代码的工作示例，那么问题就容易多了……我的应用程序到目前为止运行得很好。所有的卡片都更新和编辑正确。我只有一个看似简单的问题，但它给了我很大的启发ache。我想过滤器不会给我一个空数组，因为道具是从数组中的一张牌传递过来的。我可以确认它工作，我可以确认删除没有错误，但有一个小问题，第一张牌从来没有显示过名字…你能解释一下你的代码为什么工作吗？现在真的很困惑，我怎么能有第一张牌name show？嗯，我认为在不了解更多代码的情况下回答这个问题是不可能的，例如idToDelete来自何处，卡的结构是什么等等。如果您可以在一些沙箱中提供一个reduce示例，这可能会有所帮助。至于添加的代码，它只会检查数组是否确实有一个成员，而不是您正在尝试获取我。这样可以避免出现错误，因为如果数组为空，它将不会尝试获取名称。我编辑了我的问题，并在底部包含了完整的代码，但我是新的，因此它们可能不完整，但如果您能看一看，idToDelete来自一个卡片组件