javascript - 在 Javascript 中使用 map 数组时未定义的值

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，您正在使用无意中简写属性符号)，然后将该新项目插入数组。

最小的变化是改变这个:

newDomesticArray.push({
  newItem
});

为此:

newDomesticArray.push(newItem);

但是:

1. 您需要使用 setState 的回调版本，而不是您将对象传递到的版本。那是因为您正在根据现有状态设置新状态，并且[状态更新是异步的并且可以合并][1]。

2. 我们可以让它更简洁。 :-)

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

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 部分):

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

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

相反，我会在您用于 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 回调中执行此操作。