javascript - 当一个改变时如何更新每个映射组件中的组件状态
问题描述
我正在制作一个基本的应用程序,其中图像被渲染到屏幕上。目标是不要多次单击同一图像。我在 App comp 中使用父状态来计算分数(首次点击次数)和 Image 组件中的本地组件状态,以查看是否已经点击了图像。应用组件是这样的:
class App extends React.Component {
state = { score: 0 };
array = [1, 2, 3]
handleScoreIncrement = (e) => {
this.setState({ score: this.state.score + 1 })
console.log(this.state.score)
}
handleRestart = () => {
this.setState({ score: 0 })
}
render() {
return (
<div>
<Header
score={this.state.score} />
{this.array.map((cv, i, arr) => {
return (
<div key={cv}>
<Image
score={this.state.score}
increaseScore={this.handleScoreIncrement}
restart={this.handleRestart}
/>
</div>
)
})
}
</div>
)
}
};
export default App;
我将 App 组件中的回调作为道具传递给图像组件以更改状态,如下所示。就留在我身边吧。图像组件:
class Image extends React.Component {
state = {
clickedAlready: false,
score: this.props.score
}
handleRestart = () => {
this.props.restart();
if (this.props.score === 0) {
this.setState({ clickedAlready: false })
}
}
handleClickEvent = (e) => {
if (this.state.clickedAlready) {
alert('Clicked Already')
this.handleRestart()
this.setState({ clickedAlready: false })
} else {
this.props.increaseScore();
this.setState({ clickedAlready: true })
}
console.log(this.state.score)
}
render() {
return (
<div
style={{ border: '1px solid red', marginTop: 5 }}
onClick={this.handleClickEvent}>Image Would Go Here
</div>
)
}
}
export default Image;
现在解决问题:我遇到的问题是,每次单击图像时,它都会正确递增,但是一旦我按了两次相同的图像,重置游戏并重新开始,只有特定图像将其状态更改回{clickedAlready: false}(以便重新开始游戏)而其余的仍然说他们已被点击。如果在重置时,除了双击的组件之外的所有组件都保持其先前的状态,我将无法重新启动游戏。我希望我的 Image 组件中的事件处理程序会重置 Image comp 和 App 组件的状态,从而重新渲染这两个组件,但也许我遗漏了一些东西。请帮忙
本质上,我希望在双击一个 Image 组件时,让所有 Image 组件将其状态重新设置为 {clickedAlready: false}。
解决方案
主要更新内容:
图片
用于在prop 值更新为时
componentDidUpdate
重置clickedAlready
状态。这允许所有组件在父组件中重置状态时“重置” 。score
0
Image
score
componentDidUpdate(prevProps) { if (prevProps.score !== this.props.score && this.props.score === 0) { this.setState({ clickedAlready: false }); } }
更新
handleClickEvent
以检查clickedAlready
状态以回调以重置游戏或提高分数并更新单击状态。handleClickEvent = (e) => { const { clickedAlready } = this.state; const { increaseScore, restart } = this.props; if (clickedAlready) { alert("Clicked Already"); restart(); } else { increaseScore(); this.setState({ clickedAlready: true }); } };
沙盒演示中的完整代码
const Header = ({ score }) => <h1>Score: {score}</h1>;
class Image extends React.Component {
state = {
clickedAlready: false
};
componentDidUpdate(prevProps) {
if (prevProps.score !== this.props.score && this.props.score === 0) {
this.setState({ clickedAlready: false });
}
}
handleClickEvent = (e) => {
const { clickedAlready } = this.state;
const { increaseScore, restart } = this.props;
if (clickedAlready) {
alert("Clicked Already");
restart();
} else {
increaseScore();
this.setState({ clickedAlready: true });
}
};
render() {
const { clickedAlready } = this.state;
return (
<div
style={{ border: "1px solid red", marginTop: 5 }}
onClick={this.handleClickEvent}
>
Image Would Go Here {clickedAlready && " - clicked"}
</div>
);
}
}
class App extends React.Component {
state = { score: 0 };
array = [1, 2, 3];
componentDidUpdate() {
const { score } = this.state;
console.log(score);
if (score === this.array.length) {
alert("Won");
this.handleRestart();
}
}
handleScoreIncrement = (e) => {
this.setState({ score: this.state.score + 1 });
};
handleRestart = () => {
this.setState({ score: 0 });
};
render() {
return (
<div>
<Header score={this.state.score} />
{this.array.map((cv, i, arr) => {
return (
<div key={cv}>
<Image
score={this.state.score}
increaseScore={this.handleScoreIncrement}
restart={this.handleRestart}
/>
</div>
);
})}
</div>
);
}
}
export default App;
推荐阅读
- arrays - 使用 jq 将数组转换为字符串
- sql - 为什么我不能在一张表中使用两个外键?
- python - Peewee 字段默认基于模型实例方法?
- javascript - 将 Hello World react js 应用部署到 Heroku
- javascript - 如何使用递归计算字符串中的所有回文?
- android - Android Studio 将存根库捆绑到 APK 中
- node.js - 如何在 Dialogflow 实现中创建卡片响应?
- mysql - 如果基于条件的值插入如何将mysql转换为postgresql
- c++ - std::function 到 C 风格的函数指针
- python - ValueError: Columns must be the same length as key ---- 为什么会这样?