使用屬性名稱更新對象屬性中的數組

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(item);
  }

我有變量

console.log(item);// output {Dogs:[{name: "lofi"}]}  

我不知道如何驗證這些屬性在item （ Dogs或Cats ），這樣我就可以更新對象項目{}讓它在我的例子這樣becоme：

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

Answer 1

將“ lofi”添加到items.Dogs時，您應該這樣做：

this.state.items.Dogs.push({name:'lofi'})

控制台輸出顯示您使Cats消失了，所以我想知道您是否覆蓋項狀態，例如：

this.state.items = {Dogs:[{name:'lofi'}]}

如果我猜錯了，請告訴我。

---

編輯：

將值作為參數傳遞，如下所示：

添加類別：

var new_category = 'Birds';
this.state.items[new_category] = [];

將項目添加到類別：

var category = 'Birds';
var new_item = 'dori';
this.state.items[category].push({name: new_item });

Answer 2

const item = {Dogs:[{name: "lofi"}]}
let whichAnimal = Object.keys(item)[0]; //Dogs
let animalObj = item[whichAnimal][0]; //{name:'lofi'}

this.setState({ 
  items: this.state.items[whichAnimal].push(animalObj)
})

您可以使用Object.keys來獲取所有鍵，並假設您的item只有一個變量，我們將其設置為索引0。將其存儲在變量中，以便在setState期間我們將確切地知道要推入哪個數組項目成

Answer 3

因為，這是您要使用setstate 。

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(item);
        var copy = JSON.parse(JSON.stringify(this.state.items));
        copy["Dogs"].push({name: "lofi"}];
        this.setState({items: copy});
    }
}

在做出反應時，請勿嘗試直接更改狀態。 另外，始終最好先復制對象，因為如果更改原始狀態對象，則可能會使您的應用無法正常運行。