Question

我正在努力弄清楚在数组中设置对象状态的语法。我试图访问fruits amount属性。我熟悉concat添加新对象等但不是添加新的更新对象，如何替换对象内部属性的值，保持所有内容相同，除了更改的属性，不添加全新的对象。

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Fruits from'./Fruits';

class App extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      fruits: [
        {
          type:'apple',
          amount:10,
          color:'green',
          id: 0
        },
        {
          type:'tomato',
          amount:'25',
          color:'red',
          id: 1
        }
      ]
    };
  }
renderFruits = () => {
  const { fruits } = this.state;
    return fruits.map((item, index) =>
      <Fruits
        key={index}
          type={item.type}
            amount={item.amount}
              color={item.color}
                id={item.id}
                  increment={this.increment}
       />
        );
  }

  increment = (fruitId) => {
    const { fruits } = this.state;
    const incrementedFruit = fruits.filter((item) => {
      return item.id == fruitId;
    })
    //{fruits: {...fruits, [fruits.amount]: [fruits.amount++]}}
  }

  render() { 
    return (
      <div>
          {this.renderFruits()}
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

水果成分

import React, { Component } from 'react';

class Fruits extends Component {

increment = () => {
  const { id } = this.props;
  this.props.increment(id);
}

decrement = () => {
  console.log("decremented");
}


  render() {
    const { type, id, amount, color} = this.props;
    return(
      <div>
       <span>
         {type}
          <ul>
            <li>amount: {amount} </li>
            <li>color: {color} </li>
          </ul>
          <button onClick={this.increment}> + </button>
          <button onClick={this.decrement}> - </button>
       </span>
      </div>
    );
  }
}

export default Fruits;

stackblitz project

Answer 1

首先从水果传递index，让我们以index道具：

<Fruits
    key={item.id}
    index = {index}
    type={item.type}
    amount={item.amount}
    color={item.color}
    id={item.id}
    increment={this.increment}
  />

然后传递index，而不是增量的水果id：

increment = () => {
  this.props.increment(this.props.index);
}

您可以通过2种方式进行增量功能：

1：状态突变，请阅读：State Mutation

  increment = (index) => {
    ++this.state.fruits[index].amount;

    this.forceUpdate();
    //OR
    this.setState({fruits : this.state.fruits});
  }

2：没有状态突变

  increment = (index) => {
    let fruits = this.state.fruits.slice();
    ++fruits[index].amount;
    this.setState({fruits});
  }

P.S：还发现您使用数组索引作为键。这是   弃用。看到   https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

所以也改变：

从key={index}到key={item.id}

Answer 2

只需将增量函数更改为：

  increment = (fruitId) => {
    const { fruits } = this.state;
    fruits.forEach((fruit)=>{
      if(fruit.id == fruitId){
         fruit.amount = parseInt(fruit.amount)+ 1;
      }
    })
    this.setState({fruits: fruits})
  }

被修改

设置对象内部的特定属性的状态

2 个答案: