反应：映射数据数组

Question

我正在尝试映射数组中的数据，但是在运行代码时未映射数据。如果我记录数据（序列变量），它将记录我要映射的变量（下面的屏幕截图）。有人对为何未映射数据有任何建议吗？

numberList() {
  const uid = this.state.user.uid;
    const serialRef = db.ref(uid + "/serials");
    
    serialRef.on("value", (serial_numbers)=> {
      const serials = [];
      serial_numbers.forEach((serial_number)=> {
        serials.push({s:serial_number.val()});
      });
      console.log(serials);
  return (
    <ul>
      {serials.map((number) => <li>{number}</li>)};
    </ul>
  );
    });

}
        render (){
        return (
          <button onClick={this.numberList}>Cards</button>
        )};

}

谢谢！

Answer 1

根据您的log，我认为地图应该如下所示以获取确切的编号。

 return (
    <ul>
      {serials.map((number) => <li>{number.s.serial}</li>)};
    </ul>
  );

Answer 2

您要映射的“数字”是对象（根据您附加的日志），但是React JS不允许直接显示对象-无论如何，您可能只想显示该值。从对象数组生成视图时，还应包含一个键。正确的代码应为：

<ul>
      {serials.map((number, i) => <li key={i}>{number.s.serial}</li>)};
</ul>