更新对象属性中的数组

Question

我有一个这样定义的对象：

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor() {
    super();
    this.state = {
    lists: ["Dogs", "Cats"],
    items: {Dogs:[], Cats:[]}
    };
  }

  handleAddItem(item) {
    console.log(this.props.idName);
    console.log(item);
  }

我有变量

console.log(this.props.idName)// output: Dogs
console.log(item);// output {name: "lofi"}  

我不知道如何更新对象项{}以使其变成这样：

items{Dogs:[{name: "lofi"}], Cats:[]}

Answer 1

你可以这样做

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor() {
    super();
    this.state = {
    lists: ["Dogs", "Cats"],
    items: {Dogs:[], Cats:[]}
    };
  }

  handleAddItem(item) {
    console.log(this.props.idName);
    console.log(item);
    let oldItems = this.state.items;
    oldItems[this.props.idName].push(item);
    // Update new state for items
    this.setState({
      items: {...this.state.items}
    })

  }

Answer 2

这样的事情呢

handleAddItem(item) {
    this.setState((s, p) => ({
        items: {
            ...s.items,
            [p.idName]: s.items[p.idName].concat([item])
        }
    }))
}

几个cmets：

• setState 可以带函数，作为参数你得到旧的状态值
• [idName]: value 动态更新道具 idName

Answer 3

要更新嵌套的 Array 子状态，可以使用扩展运算符附加元素

handleAddItem = item => {
  this.setState((prevState, props) => ({
    items: {
      ...prevState.items,
      [props.idName]: [
        ...prevState.items[props.idName],
        item
      ]
    }
  }))
}