组件在嵌套循环中不返回。

Question

我试图在嵌套循环中呈现子组件。但是，在第二个循环中没有呈现它(红色勾选)。虽然它通常在第一个循环中呈现(蓝色勾选)。请突出显示为什么在第二个循环中没有呈现。

https://i.stack.imgur.com/LFiKU.png

代码框链接：https://codesandbox.io/s/competent-nova-u9rzuh?file=/src/parent.js

​

import React from "react";
import ProductFeaturesCards from "./ProductFeaturesCards.js";
import { Products } from "../ProductsData.js";

const ProductFeatures = ({ className = "", id }) => {
  return (
    <section id='product-features' className={`${className}`}>
      <div className='container'>
        <div className='row d-flex justify-content-center'>
          <div className='col-lg-12 col-md-12 col-sm-12 col-12 py70'>
            <p className='features-title'>Product Features</p>
          </div>
        </div>
        <div className='row'>
          {Products.forEach((item, i) => {
            if (item.id === id) {
              // return <ProductFeaturesCards data={item} key={i} />;
              Object.values(item.Product_features[0]).map((feature, index) => {
                console.log("ProductFeaturesCards:", feature);
                return <ProductFeaturesCards data={feature} key={index} />;
              });
            }
          })}
        </div>
      </div>
    </section>
  );
};

export default ProductFeatures;

​

Answer 1

你能试试这个吗。不确定这能不能用

 if (item.id === id) {
      // return <ProductFeaturesCards data={item} key={i} />;
      return Object.values(item.Product_features[0]).map((feature, index) => {
           console.log("ProductFeaturesCards:", feature);
           return <ProductFeaturesCards data={feature} key={index} />;
      });
 }

Answer 2

您所犯的第一个错误是使用forEach。forEach将对数据进行变异，不会返回任何内容。因此，您需要使用map，它不会发生变异并返回结果。

第二个错误是在地图的if条件中没有添加返回语句。因此，它永远不会被返回，因此您的第一个映射将不会接收值。

在此之后，您应该能够运行它。

<div className="row">
          {Products.map((item) => { // replaced forEach with map
           if (item.id === id) {
            return Object.values(item.Product_features[0]).map( // return added
                (feature, index) => {
                  return <Card data={feature} key={index} />;
                }
            );
           }
          })}
</div>