Question

尝试从对象获取值并将其传递给子代时遇到问题。这是我的代码：

let listDomestic = this.state.domesticArray.map((item) => 
      <DomesticItem 
        key={item.id}
        index={item.index}
        deleteMethod={() => this.deleteDomesticElement(key)}
      />
    );

问题出在key={item.id}和index={item.index}上，所以key和index是未定义的，我可以通过在子元素中打印它们来看到这一点

我在domesticArray中添加对象的功能如下：

addDomesticItem() {
    let id = Date.now();
    let index = this.state.domesticArray.length;
    let newItem = {
      id: id,
      index: index,
      quantity: 0,
      watt: 0,
      duration: 0,
      whDay: 0,
    }

    let newDomesticArray = [...this.state.domesticArray];
    newDomesticArray.push({
      newItem
    });

    this.setState({
      domesticArray: newDomesticArray
    });
  }

Answer 1

您的代码正在创建一个新对象，并将newItem设置为属性（该属性的名称为newItem，您无意中使用了速记属性表示法），然后将新项目推入数组。

最小的更改是更改此内容

newDomesticArray.push({
  newItem
});

对此：

newDomesticArray.push(newItem);

但是：

您需要使用setState的回调版本，而不是将对象传递给的版本。这是因为您要基于现有的状态设置 new 状态，并且[状态更新是异步的，并且可以组合] [1]。

我们可以使其更加简洁。：-）

所以只需解决这两件事，并使用参数解构：

addDomesticItem() { this.setState(({domesticArray}) => { const newItem = { id: Date.now(), index: domesticArray.length, quantity: 0, watt: 0, duration: 0, whDay: 0, }; return {domesticArray: [...domesticArray, newItem]}; }); }

但是（第2部分）：

我建议您不要依赖Date.now来id。如果您最终在同一毫秒内添加了两个项目（请记住，计算机快速），则它们将没有唯一的ID。

我建议您不要在项目本身的数组中包括该项目的索引，因为这样会使维护数组中的条目变得困难。

相反，在您用于id值的组件中，我会有一个不断增加的计数器。在您的构造函数中：

this.idAllocator = 0;

然后：

addDomesticItem() { this.setState(({domesticArray}) => { const newItem = { id: ++this.idAllocator, quantity: 0, watt: 0, duration: 0, whDay: 0, }; return {domesticArray: [...domesticArray, newItem]}; }); }

然后：

let listDomestic = this.state.domesticArray.map((item, index) => <DomesticItem key={item.id} deleteMethod={() => this.deleteDomesticElement(key)} /> );

，然后当您需要在this.state.domesticArray中查找项目时，请使用find：

const item = this.state.domesticArray.find(item => item.id === id);

或findIndex来找到其索引：

const index = this.state.domesticArray.findIndex(item => item.id === id);

请记住，如果要使用该index来修改domesticArray，则需要在setState回调中进行。

在Java中使用地图数组时未定义的值

1 个答案: