ReactJS：为什么我的组件的状态不会随着新的道具而改变？
[英]ReactJS: Why isn't my component's state changing with new props?
问题描述
I have a header with links that each lead to a different gallery viewer, so I want each gallery to exhibit a unique default large image upon rendering. 
我有一个带有链接的标头，每个链接都指向不同的画廊查看器，因此我希望每个画廊在渲染时都显示一个唯一的默认大图像。 The parent component below is responsible for obtaining the index of the gallery that was clicked from a child component and passes an image to another child. 下面的父组件负责获取从子组件单击的画廊索引，并将图像传递给另一个子组件。
class App extends Component {
constructor(props) {
super(props);
this.state = {
onViewIndex: -1,
defaultImageLarge: "./images/sala-large/04_sl02_BB.jpg"
}
this.handlePickerClick = this.handlePickerClick.bind(this);
}
handlePickerClick(index) {
this.setState({onViewIndex: index});
if(index == 1) {
this.setState({defaultImageLarge: "./images/sala-large/04_sl02_BB.jpg"});
console.log("changed large image to sala");
}
else if(index == 2) {
this.setState({defaultImageLarge: "./images/qto-large/04_qt01_BB.jpg"});
console.log("changed large image to " + this.state.defaultImageLarge);
}
else if(index == 3) {
this.setState({defaultImageLarge: "./images/hall-large/04_det03_BB.jpg"});
console.log("changed large image to " + this.state.defaultImageLarge);
}
else if(index == 4) {
this.setState({defaultImageLarge: "./images/ban-large/04_ban01_BB.jpg"});
console.log("changed large image to " + this.state.defaultImageLarge);
}
}
render() {
return (
<div id = "page-container" align = "center">
<Header />
<Banner />
<div className = "section-header"><h2 className = "section-header-text">PORTFOLIO</h2></div>
<GalleryPicker onClick = {this.handlePickerClick}/>
<GalleryView onView = {this.state.onViewIndex} imageLarge = {this.state.defaultImageLarge}/>
</div>
);
}
}
My GalleryView component receives the correct image from the imageLarge prop, but won't update its state with it: 我的GalleryView组件从imageLarge道具接收了正确的图像，但不会使用它来更新其状态：
class GalleryView extends Component {
constructor(props) {
super(props);
this.getImageList = this.getImageList.bind(this);
this.changeImage = this.changeImage.bind(this);
this.state = {
imageLarge: this.props.imageLarge
}
}
changeImage(address) {
this.setState({imageLarge: address})
}
getImageList(index) {
//SALAS
if(index == 1) {
return (
<div>
<div id = "gallery-list-container">
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/sala-small/04_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/04_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/04_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/04_sl03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/04_sl04_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/04_sl04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/05_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/05_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/05_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/05_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl04_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/13_sl05_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/13_sl05_BB.jpg')}/>
</li>
</ul>
<br/>
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/sala-small/14_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/14_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/14_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/14_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/14_sl04_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/14_sl04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/15_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/15_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/15_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/15_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/15_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/15_sl03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/16_sl01_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/16_sl01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/16_sl02_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/16_sl02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/16_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/16_sl03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/sala-small/16_sl04_SS.jpg")}
onClick = {() => this.changeImage('./images/sala-large/16_sl04_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc = {this.state.imageLarge} />
</div>
);
}
//QUARTOS
else if(index == 2) {
alert(this.props.imageLarge);
alert(this.state.imageLarge);
return (
<div>
<div id = "gallery-list-container">
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/qto-small/04_qt01_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/04_qt01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/qto-small/04_qt02_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/04_qt02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/qto-small/14_qt01_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/14_qt01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/qto-small/16_qt01_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/16_qt01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/qto-small/17_qt01_SS.jpg")}
onClick = {() => this.changeImage('./images/qto-large/17_qt01_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc = {this.state.imageLarge} />
</div>
);
}
//HALL
else if(index == 3) {
alert(this.props.imageLarge);
return (
<div>
<div id = "gallery-list-container">
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/hall-small/04_det03_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/04_det03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/04_det04_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/04_det04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/16_det03_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/16_det03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/17_det01_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/17_det01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/18_det01_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/18_det01_BB.jpg')}/>
</li>
<br/>
<li className = "list-view-item">
<img src = {require("./images/hall-small/04_ee01_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/04_ee01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/05_ee02_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/05_ee02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/05_ee03_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/05_ee03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/hall-small/14_sl03_SS.jpg")}
onClick = {() => this.changeImage('./images/hall-large/14_sl03_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc = {this.state.imageLarge} />
</div>
);
}
//BANHEIROS
else if(index == 4) {
return (
<div>
<div id = "gallery-list-container">
<ul className = "list-view">
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_ban01_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_ban01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_ban03_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_ban03_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_ban04_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_ban04_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_ban05_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_ban05_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_det01_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_det01_BB.jpg')}/>
</li>
<br/>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_det02_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_det02_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/04_det09_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/04_det09_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/14_ban01_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/14_ban01_BB.jpg')}/>
</li>
<li className = "list-view-item">
<img src = {require("./images/ban-small/18_ban01_SS.jpg")}
onClick = {() => this.changeImage('./images/ban-large/18_ban01_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc = {this.state.imageLarge} />
</div>
);
}
}
render() {
return (
<div>
<div id = "gallery-view-container">
{this.getImageList(this.props.onView)}
</div>
</div>
);
}
}
What seems to be the problem here? 这里似乎是什么问题？
3 个解决方案
解决方案1
1 2018-08-28 02:32:25
You need to update the state when prop has changes, or use prop directly without to create a local state... 您需要在prop发生更改时更新状态，或者直接使用prop而不创建本地状态...
Take a look at: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops 看看： https : //reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
解决方案2
1 2018-08-28 02:45:06
Here is a solution with getDerivedStateFromProps 这是使用getDerivedStateFromProps的解决方案
class GalleryView extends Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.imageLarge !== prevState.imageLarge) {
return {
imageLarge: nextProps.imageLarge,
..
};
}
return null;
}
constructor(props) {
super(props);
this.getImageList = this.getImageList.bind(this);
this.changeImage = this.changeImage.bind(this);
this.state = {
imageLarge: this.props.imageLarge
}
}
解决方案3
0 2018-08-28 03:16:53
The problem is that you have 2 states which are not synchronised properly. 问题是您有2个状态未正确同步。 You have some options. 您有一些选择。 You can use getDerivedStatesFropProps of course; 您当然可以使用getDerivedStatesFropProps； but I will change the child to a functional component to use the state of the parent so that whenever the state of the parent changes, the child is re-rendered and automatically updated. 但是我会将子级更改为功能组件以使用父级的状态，以便每当父级状态更改时，都会重新呈现子级并自动更新。 That way you don't need to synchronise two states since you will have only one. 这样，您将不需要同步两个状态，因为您只有一个状态。
In the parent 在父母中
<GalleryView getImageList={this.getImageList} changeImage={this.changeImage} imageLarge = {this.state.defaultImageLarge} index={this.state.onViewIndex} onView = {this.state.onViewIndex} />
And the child 和孩子
GalleryView = (getImageList, changeImage, imageLarge, index, onView) => {
//SALAS
if (index == 1) {
return (
<div>
<div id="gallery-list-container">
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/sala-small/04_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/04_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/04_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/04_sl03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/04_sl04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/04_sl04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/05_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/05_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/05_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/05_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/13_sl05_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/13_sl05_BB.jpg')}/>
</li>
</ul>
<br/>
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/sala-small/14_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/14_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/14_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/14_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/14_sl04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/14_sl04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/15_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/15_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/15_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/15_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/15_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/15_sl03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/16_sl01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/16_sl01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/16_sl02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/16_sl02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/16_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/16_sl03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/sala-small/16_sl04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/sala-large/16_sl04_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc={imageLarge}/>
</div>
//QUARTOS
);
} else if (index == 2) {
alert(imageLarge);
alert(imageLarge);
return (
<div>
<div id="gallery-list-container">
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/qto-small/04_qt01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/04_qt01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/qto-small/04_qt02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/04_qt02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/qto-small/14_qt01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/14_qt01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/qto-small/16_qt01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/16_qt01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/qto-small/17_qt01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/qto-large/17_qt01_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc={imageLarge}/>
</div>
//HALL
);
} else if (index == 3) {
alert(imageLarge);
return (
<div>
<div id="gallery-list-container">
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/hall-small/04_det03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/04_det03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/04_det04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/04_det04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/16_det03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/16_det03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/17_det01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/17_det01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/18_det01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/18_det01_BB.jpg')}/>
</li>
<br/>
<li className="list-view-item">
<img
src={require("./images/hall-small/04_ee01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/04_ee01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/05_ee02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/05_ee02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/05_ee03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/05_ee03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/hall-small/14_sl03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/hall-large/14_sl03_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc={imageLarge}/>
</div>
//BANHEIROS
);
} else if (index == 4) {
return (
<div>
<div id="gallery-list-container">
<ul className="list-view">
<li className="list-view-item">
<img
src={require("./images/ban-small/04_ban01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_ban01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_ban03_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_ban03_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_ban04_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_ban04_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_ban05_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_ban05_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_det01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_det01_BB.jpg')}/>
</li>
<br/>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_det02_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_det02_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/04_det09_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/04_det09_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/14_ban01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/14_ban01_BB.jpg')}/>
</li>
<li className="list-view-item">
<img
src={require("./images/ban-small/18_ban01_SS.jpg")}
onClick=
{() => changeImage.bind(this,'./images/ban-large/18_ban01_BB.jpg')}/>
</li>
</ul>
</div>
<ImageOnView imgSrc={imageLarge}/>
</div>
);
}
return (
<div>
<div id="gallery-view-container">
{getImageList(onView)}
</div>
</div>
);
}
I think your code needs further review though. 我认为您的代码需要进一步审查。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
更改不直接在ReactJs中处理事件的组件的状态 - Changing the state of a component that isn't directly handling the event in ReactJs
为什么在 React 中更改 state 时我的子组件不更新数据？ - Why isn't my child component updating data when changing the state in React?
子组件未使用新道具进行更新 - Child Component Isn't Updating with New Props
为什么孩子的 state 没有变成“蓝色”？ - Why isn't child's state changing to 'blue'?
为什么我的组件不按状态更改重新呈现？ - Why isn't my component rerendering on state change?
为什么更新后的 state 没有返回到我的组件？ - Why isn't the updated state returned to my component?
为什么在 class 组件的 state 中使用 props 时，在 App.js 中更改组件 props 不会在浏览器中自动刷新它？ - Why does changing Component props in App.js doesn't automatically refreshes it in browser when props are used in state of class component?
React.js，父组件，状态和道具 - Reactjs, parent component, state and props
在 React DevTools 中，我的组件正在重新渲染，但父组件没有，并且它的状态/道具没有改变 - In React DevTools my component is re-rendering but the parent is not, and it's state/props are not changing
React Redux嵌套的智能组件-状态未映射到道具 - React redux nested smart component - state isn't mapped to props
相关标签