React：映射数据数组

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>