Question

我有一个嵌套的地图数组，我想在其中检索博客条目。 console.log()将输出描述，但是当我尝试返回描述值时。没有任何作用？

import React from 'react';

const Fragrances = (props) => {
const { FragranceArray } = props;
    return (
        <div className="row">
        {

            FragranceArray.map((fragrance, index) => {
                    const dataPosts = fragrance.data.entries;

                    console.log(dataPosts);

                {
                    dataPosts.map((value, index) => {
                        const { category, description, image, name, published, rating } = value;
                        console.log(description);
                        return <h1>{description}</h1>
                    })
                }
            })
        }
        </div>
    )
}
export default Fragrances;

Answer 1

此表达式不执行任何操作：

{
  dataPosts.map((value, index) => {
      const { category, description, image, name, published, rating } = value;
      console.log(description);
      return <h1>{description}</h1>
  })
}

您需要返回子图的结果：

import React from 'react';

const Fragrances = (props) => {
const { FragranceArray } = props;
    return (
        <div className="row">
        {

            FragranceArray.map((fragrance, index) => {
                    const dataPosts = fragrance.data.entries;

                    console.log(dataPosts);

                return (
                  <div>
                    {
                      dataPosts.map((value, index) => {
                          const { category, description, image, name, published, rating } = value;
                          console.log(description);
                          return <h1>{description}</h1>
                      })
                    }
                  </div>
                )
            })
        }
        </div>
    )
}
export default Fragrances;

Answer 2

在FragranceArray.map()回调中，您需要将调用结果返回到dataPosts.map()。这可以通过在完成此映射的行（即return）之前添加return dataPosts.map(...)来完成。

由于映射返回项目的集合，因此您需要将这些项目包装在<div>之类的元素中，或者，如果要保留DOM的现有结构（并避免添加“ div包装器”），您可以使用<React.Fragmment>，如下所示：

import React from 'react';

const Fragrances = (props) => {
const { FragranceArray } = props;
    return (
        <div className="row">
        {

            FragranceArray.map((fragrance, index) => {
                    const dataPosts = fragrance.data.entries;

                    console.log(dataPosts);

                // Add return here, and wrap mapped items with React.Fragmment
                return (<React.Fragmment> { 

                    dataPosts.map((value, index) => {
                        const { category, description, 
                                image, name, 
                                published, rating } = value;
                        console.log(description);
                        return <h1>{description}</h1>
                    })
                } </React.Fragmment>)

            })
        }
        </div>
    )
}
export default Fragrances;

请参见https://gist.github.com/pascaldelange/f43cc1f6dc290291804b64b0db1cadfe

React Map-控制台日志有效..但是不返回HTML值吗？

2 个答案: