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

要更新嵌套数组子状态，可以使用扩展运算符追加元素

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

Answer 2

那样的事情

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

很少有评论：

setState可以将函数作为参数获得旧状态值
[idName]: value动态更新道具idName

Answer 3

您可以执行类似

的操作

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

  }

更新对象属性中的数组

3 个答案: