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）中的哪个属性，以便我可以更新对象项{}以使其成为我的像这样的例子：

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进行设置。将其存储在变量中，以便在{{1}期间我们将确切地知道哪个数组将项目推送到

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

在做出反应时，不要试图直接改变状态。此外，它始终是首先复制对象的最佳做法，因为如果您更改原始状态对象，它可能会使您的应用程序无法预测。

使用属性的名称更新对象属性中的数组

3 个答案: