Firestore文档双数组数据生成表格异常问题求助

你当前的代码把每个Firestore文档中的value和quantity整个数组直接渲染到表格的一行里，而非将数组中的每个元素拆分成单独的表格行，因此出现了不符合预期的显示效果。

需要先将每个文档中的value和quantity数组的对应元素配对，把所有单个食物项整合到统一数组中，再渲染表格。

修改后的完整代码如下：

export default class NutritionTableOfTheUser extends Component {
  constructor() {
    super();
    this.state = {
      tableData: []
    }
  }

  componentDidMount() {
    const dbRef = collection(db, 'data');
    onSnapshot(dbRef, (querySnapshot) => {
      let foods = [];
      querySnapshot.forEach(doc => {
        const docData = doc.data();
        // 配对每个文档中value和quantity的对应元素，生成单个食物对象
        const foodItems = docData.value.map((foodName, index) => ({
          food: foodName,
          quantity: docData.quantity[index]
        }));
        // 将当前文档的所有食物项合并到总数组中
        foods.push(...foodItems);
      });
      this.setState({ tableData: foods })
    })
  }

  render() {
    return (
      <div className='container mt-3'>
        <table className='table table-hover'>
          <thead>
            <tr>
              <th>#</th>
              <th>Food</th>
              <th>Quantity</th>
            </tr>
          </thead>
          <tbody>
            {this.state.tableData.map((item, index) => (
              <tr key={index}>
                <td>{index + 1}</td>
                <td>{item.food}</td>
                <td>{item.quantity}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    )
  }
}

• 数据处理部分：遍历每个Firestore文档时，用map将value数组的每个元素和对应位置的quantity元素配对成单个对象，再通过展开运算符...把这些对象添加到总数组中，实现数据扁平化。
• 渲染部分：直接遍历扁平化后的tableData，每个元素对应表格的一行，分别渲染食物名称和数量。

如果存在value和quantity数组长度不一致的情况，可以添加长度判断避免越界，比如：

const maxLength = Math.min(docData.value.length, docData.quantity.length);
const foodItems = [];
for(let i=0; i<maxLength; i++) {
  foodItems.push({
    food: docData.value[i],
    quantity: docData.quantity[i]
  });
}

内容的提问来源于stack exchange，提问作者Ashka