javascript - 大家好,如何增加存储在数组对象中的状态值
问题描述
我在增加我的状态的一部分时遇到了麻烦。我遇到的问题是访问或定位我想要增加的特定值,即可爱。我是新来的反应,并添加了与问题相关的主要代码位
class App extends React.Component {
state = {
cats: [
{
name: 'felix',
cuteness: 0,
img:
'https://....jpg
}]
}
handleCuteness = inc_cuteness => {
const { cuteness } = this.state.cats;
this.setState({ cuteness: cuteness + inc_cuteness });
};
<button
className="btn btn-success"
onClick={() => handleCuteness(1)}
value={cuteness}
>
Cuteness
<span className="badge badge-light m-2">
{cuteness}
</span>
</button
解决方案
由于您正在处理一组对象,因此为了更新正确的猫,您需要识别正确的对象。你应该给每个猫对象一个唯一的标识符。这样可以更轻松地找到要更新的特定猫。
更新您的handleCuteness
事件处理程序以接受 cat-id 作为参数。这将帮助我们find
在数组中更新正确的猫。在为您的标记设置 onClick 处理程序时,您可以传递属于每只猫的完全相同的猫 ID。
class App extends React.Component{
state = {
cats: [
{id: 1, name: "felix", cuteness: 0, img: "blah"},
{id: 2, name: "samuel", cuteness: 0, img: "blah2"}
]
}
handleCuteness = (catId) => {
const catsCopy = [...this.state.cats]
let foundCat = catsCopy.find(cat => cat.id == catId)
foundCat.cuteness = foundCat.cuteness + 1
this.setState({
cats: catsCopy
})
}
createCats = () => {
const { cats } = this.state
return cats.map((cat) => {
return(
<div>
<img src={cat.img}/>
<button
className="btn btn-success"
onClick={() => this.handleCuteness(cat.id)}
>
Cuteness
<span className="badge badge-light m-2">
{cuteness}
</span>
</button>
</div>
)
})
}
render(){
return(
<div>{this.createCats()}</div>
)
}
}
推荐阅读
- java - Java 和 Microsoft Access sql 选择命令与二进制搜索
- mysql - MySQL 社区服务器是本地的还是托管的
- sql - 几乎相同值的日期比较
- pandas - 使用共享 x 轴 Pandas 在一张图表中绘制不同的时间序列数据
- header - 如何保持 HTTP/2 连接直到请求/响应会话完成?
- swift - 我的 UISearchBar 结果有什么问题?
- ios - J2ObjC:如何从 JavaIOIOException 获取 NSError
- security - 我需要停止使用 Robots.txt 抓取哪些页面
- android - 无法以编程方式在 Gionee A1 中打开静音模式
- java - 在 GPU Java 上配置 TensorFlow