Reactjs 更换组件后的道具'；它被推入一个阵列？

我有一系列具有以下道具的组件：

<TourCard
props={props}
key={address.id}
address={address}
history={props.history}
virtualId={virtualId}
removeIndex={props.removeIndex}
tourCards={props.tourCards}
setTourCards={props.setTourCards}/>

tourCards是我将组件推入的阵列

我的问题是，一旦我将另一个组件添加到阵列中，组件上的tourCards值就过时了

[<TourCard/>, <TourCard/>, <TourCard/>]

[，]

如何更改/更新数组中索引为0的TourCard组件中的道具TourCard值，以反映数组中最后一个组件中存在的更新状态

<button onClick={() => {
                      props.setTourCards(cards => {
                        const virtualId = cards.length
                        console.log(virtualId)
                        let polylinePathCopy = props.polylinePath
                        polylinePathCopy.push(pathCoordinates)
                        props.setPolylinePath(polylinePathCopy)
                        return [...cards, 
                        <TourCard
                        props={props}
                        key={address.id}
                        address={address}
                        history={props.history}
                        virtualId={virtualId}
                        removeIndex={props.removeIndex}
                        tourCards={props.tourCards}
                        setTourCards={props.setTourCards}/>]
                      })
                    }}
                    >
                      Add to tour
                    </button>

{
道具。设置图卡（卡片=>{
const virtualId=cards.length
console.log（虚拟化）
让polylinePathCopy=props.polylinePath
polylinePathCopy.push（路径坐标）
props.setPolylinePath（polylinePathCopy）
归还[…卡片，
]
})
}}
>
加入旅游

这里是旅游卡的渲染位置

return (
          <>
          <section className="planSection">
            <div>
              <PlanMap
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `400px`, width: `400px` }} />}
              mapElement={<div style={{ height: `100%` }} />}
              />
            </div>
            <section className="tourSection">
              <button onClick={() => {
                props.setTourCards("")
              }}>Clear tour</button>
              {props.tourCards} 
            </section>
          </section>
            </>
        )

返回(
{
道具。套牌（“”）
}}>畅游
{props.tourCards}
)

每当您想要更新数组类型的道具时（这样您就可以触发

组件更新

），您可以执行以下操作：

tourCards = [...tourCards];

---

我将如何在上下文中使用该方法？因为在

中，道具

旅游卡

由

道具决定。旅游卡

我认为是由

的父组件传递给它的，您可能想更新父组件中的

props.tourCards

。我在原始问题中添加了更多代码。在按钮onClick和return语句之间的何处/如何更新组件的tourCards属性？我问这个问题的原因是因为我有一个delete函数，该函数应该从数组中删除组件，但第一个组件中的tourCards状态是其中只有一项，因此，如果我删除数组中的第一个组件，它会删除它后面的任何内容。const removeIndex=（index）=>{let holdingArray=tourCards holdingArray.splice（index，1）setTourCards（holdingArray）}您的

holdingArray

不是一个“holdingArray”，它仍在引用

tourCards

tourCards = [...tourCards];