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

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 未定义，我通过在 child

中打印它们看到了这一点

我在 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，您无意中使用了 shorthand 属性符号），然后将该新项目推入数组。

最小的变化是改变这个：

newDomesticArray.push({
  newItem
});

对此：

newDomesticArray.push(newItem);

但是:

您需要使用 setState 的回调版本，而不是您传递对象的版本。那是因为您正在根据 existing 状态设置 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 回调中进行。

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

Undefined values when using map array in Javascript

javascript

arrays

undefined

reactjs

react-native