我无法增加部分状态。我正在访问或定位我要增加的特定值(可爱)的问题。我是新来的反应者,并添加了与问题相关的主要代码
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
答案 0 :(得分:2)
由于要使用对象数组,因此为了更新合适的猫,您需要确定合适的对象。您应该给每个猫对象一个唯一的标识符。这样可以更轻松地找到要更新的特定猫。
更新您的handleCuteness
事件处理程序,以接受cat-id作为参数。这将帮助我们find
正确的猫在数组中进行更新。为标记设置onClick处理程序时,您可以传递属于每只猫的完全相同的cat-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>
)
}
}
答案 1 :(得分:1)
您首先必须知道要编辑数组中的哪个对象。您提供的示例根本不起作用,如果您有完整的示例,那就更好了。
但是假设您具有以下状态:
state = {
cats: [
{
name: 'felix',
cuteness: 0,
},
{
name: 'garfield',
cuteness: -1,
},
],
}
您想在点击时更新garfield
的可爱程度。您必须做的如下:
const onClick = inc_cuteness => {
// map the array to find the "garfield" entry
const updatedCats = this.state.cats.map(cat => {
// update only the garfield entry and return it
if (cat.name === 'garfield') {
return { ...cat, cuteness: cat.cuteness + inc_cuteness }
}
// if entry is not garfield, then just return the previous value
return cat
})
// set new cats array
this.setState({ cats: updatedCats })
}
如果您需要动态选择猫的名字,可以使用
const onClick = (inc_cuteness, catname) => {
const updatedCats = this.state.cats.map(cat => {
if (cat.name === catname) {
return { ...cat, cuteness: cat.cuteness + inc_cuteness }
}
return cat
})
this.setState({ cats: updatedCats })
}