react中更改数组元素的属性

Question

我正在尝试更改数组元素的属性的值；

使用诸如：的方法

incrementLike(productIm) {
    console.log(`incrementing ${productIm}`);
    const index = this.state.products.findIndex(o => o.Im === productIm);
    let selectedLikes = this.state.products[index].likes;
    this.setState({ selectedLikes: selectedLikes + 1 });
    console.log(`adding 1 to ${selectedLikes}`);
}

数组定义如下：

constructor(props) {
    super(props);
    this.state = {
        products: [
            {
                im: "corpo",
                likes: 1128
            },
            {
                im: "med",
                likes: 256
            },
            {
                im: "smart",
                likes: 512
            }
        ]
    };

我/我应该怎么做？

Answer 1

找到索引后，通过将索引之前的所有元素散布到其中，添加修改后的对象，并将所有对象扩展到索引之后，创建一个新数组。

您还需要修正Im错字，属性名称为im。您还需要修复selectedLikes属性，您在状态中定义的属性名称是likes。

实时演示：

class ProductList extends React.Component {
  state = {
    products: [{
        im: "corpo",
        likes: 1128
      },
      {
        im: "med",
        likes: 256
      },
      {
        im: "smart",
        likes: 512
      }
    ]
  }
  render() {
    return this.state.products.map(({ im, likes }) => (
      <React.Fragment>
        <div onClick={() => this.incrementLike(im)}>{im}</div>
        <div>{likes}</div>
      </React.Fragment>
    ));
  }
  incrementLike(productIm) {
    const { products } = this.state;
    const index = products.findIndex(o => o.im === productIm);
    this.setState({
      products: [
        ...products.slice(0, index),
        { ...products[index], likes: products[index].likes + 1 },
        ...products.slice(index + 1),
      ]
    });
  }
}

// Render it
ReactDOM.render(<ProductList />, document.querySelector('#react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="react"></div>

Answer 2

老实说，我发现使用过滤器非常方便。我会尝试类似的东西：