[英]Why does my React grandchild component not update after receiving a change in props from its parent? Or: do I need to use state?
I have tried finding the answer to this on StackOverflow and there are some related posts (eg React Child Component Not Updating After Parent State Change ) but I want to understand why this is not working... 我试图在StackOverflow上找到答案,并且有一些相关的文章(例如, 在父状态更改后,React子组件未更新 ),但我想了解为什么这不起作用...
I have a React application that will display a layout of character cards (that is, each card displays a different character). 我有一个React应用程序,它将显示字符卡的布局(即每个卡显示一个不同的字符)。 It uses a child component,
CharacterBoard
, that lays out the CharacterCards
, which would be a grandchild component. 它使用一个子组件
CharacterBoard
,该子组件布置了CharacterCards
,这将是一个孙子组件。 I pass the characters
down from the App
to the CharacterBoard
as props, and CharacterBoard
in turn map
s these out the CharacterCard
s. 我通过
characters
下降从App
到CharacterBoard
当道具,并CharacterBoard
反过来map
这帮了CharacterCard
秒。
The problem is that I want the state of the character
to change when I click on one of them. 问题是当我单击其中之一时,我希望
character
的状态发生变化。 Specifically, I want the revealed
field to change. 具体来说,我希望
revealed
字段发生变化。 However, even though the state change is reflected in the array of character
s in the App (that is, the revealed
field changes correctly), and the change is reflected in the array of character
s in CharacterBoard
, but not in CharacterCard
. 但是,即使状态更改反映在App中的
character
数组中(即, revealed
字段正确更改),并且该变化也反映在CharacterBoard
的character
数组中,而不反映在CharacterCard
。 In fact, my mapping does not seem to be called at all in CharacterBoard
when the props change. 实际上,当道具改变时,我的映射似乎根本不在
CharacterBoard
被调用。
Do I need to use something like getDerivedStateFromProps
in CharacterBoard
and set the state
of that component and then use the state
to map the values down to CharacterCard
? 我是否需要在
CharacterBoard
使用诸如getDerivedStateFromProps
东西并设置该组件的state
,然后使用该state
将值向下映射到CharacterCard
? If so, why? 如果是这样,为什么?
In short (tl;dr), can you pass props on down through the component chain and map them out along the way and still have all changes reflected automatically? 简而言之(tl; dr), 您可以将道具向下传递通过组件链并沿途将其映射出来,并且仍然自动反映所有更改吗?
Thanks for any guidance. 感谢您的指导。
If it helps, the render
method of my App is 如果有帮助,我的应用程序的
render
方法是
render() {
const {state: {characters}} = this
return (
<div>
<header>
</header>
<main>
<CharacterBoard
onCardSelected={this.onCardSelected}
rowSize={logic.ROW_SIZE}
characters={characters}
cardSize={this.CARD_SIZE}/>
</main>
</div>
);
}
that of CharacterBoard
is CharacterBoard
是
render() {
const {props: {characters, rowSize, cardSize,onCardSelected}} = this
const rowUnit = 12 / rowSize
const cardLayout = characters
.map((character, i) => (
<Col xs={6} sm={rowUnit} key={character.name}>
<CharacterCard
onCardSelected = {onCardSelected}
key={i + Math.random()}
character={character}
cardSize={cardSize}
/>
</Col>
)
)
return (
<div>
<Container>
<Row>
{cardLayout}
</Row>
</Container>
</div>
)
}
and finally CharacterCard
has this render
method 最后,
CharacterCard
具有此render
方法
render() {
const {props: {character, cardSize}} = this
const {thumbnail, revealed} = character
const imgURL = `${thumbnail.path}/${cardSize}.${thumbnail.extension}`
const topCardClass = classNames('characterCard__card-back', {'characterCard__card-back--hidden': revealed})
console.log(revealed)
return < a href="/#" onClick={this.onCardSelected}>
<div className='characterCard__card'>
<div className={topCardClass}>
<img src="/images/card_back.png" alt=""/>
</div>
< div className='characterCard__card-front'>< img alt=''
src={imgURL}/>
</div>
</div>
</a>
}
Doh! 卫生署! A simple forgetting to
setState
in App
. 一个简单的忘记
App
setState
。 Knowing that it should work made me go back through the code one more time and see that, indeed, it was a stupid error on my part. 知道它应该工作后,我又回头看了一下代码,发现这确实是我的愚蠢错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.