大家好,如何在存储在数组对象中的状态下增加值

时间:2019-09-04 19:14:20

标签: javascript reactjs

我无法增加部分状态。我正在访问或定位我要增加的特定值(可爱)的问题。我是新来的反应者,并添加了与问题相关的主要代码

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

2 个答案:

答案 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 })
}