你如何在 React 中使用 map 和 filter 循环遍历 json？答案

【问题标题】：How do you loop through json with map and filter in React?你如何在 React 中使用 map 和 filter 循环遍历 json？
【发布时间】：2021-03-11 02:37:30
【问题描述】：

我有 json 格式的数据，我想循环使用它来渲染相同的组件 (ContentThumbnail) 八次，但标题和其他内容不同。

我尝试创建一个接受四个参数的函数来实现这一点。这是我在名为 RenderContent.js 的单独文件中编写的函数：

import React from 'react';
import ContentThumbnail from './ContentThumbnail';

function RenderContentThumbnail(data, sectionName, wrapperStart, wrapperEnd) {
  return (
    <div>
      {data
        .filter(d => d.sectionName === { sectionName })
        .map(filteredSection => (
          {wrapperStart}
          <ContentThumbnail {filteredSection.title} />
          {wrapperEnd}
        ))}
    </div>
  );
}
export default RenderContentThumbnail;

这是我试图在我的组件 DefaultDashboard.js 中执行该功能的地方：

import React, { useEffect } from 'react';
import RenderContent from '../../content-thumbnail/RenderContent';


    const DefaultDashboard = () => {
    const { data } = useFetchData({ queryString: `${contentLibraryApiUrl}/GetContentForPage/Home` });
    
     return (
        RenderContentThumbnail(data, "topSection", "<div>", "</div>")
      );
    };
    
    export default DefaultDashboard;

有人能帮我看看我哪里出错了吗？我的地图函数中出现错误，页面根本不会呈现。:(

非常感谢！

凯蒂

更新！

我已对代码进行了调整以指定称为“标题”的道具，但我得到以下内容：

【问题讨论】：

你应该返回，而不是作为函数调用
实际上，当您执行 <RenderContent {...props} /> 时，您正在调用 RenderContent 函数，但使用的是 jsx 语法。这是另一种方式，但我同意你应该坚持使用 jsx 方法。

标签： json reactjs array.prototype.map

【解决方案1】：

您应该更改渲染 RenderContent 的方式：

const DefaultDashboard = () => {
    const { data } = useFetchData({ queryString: `${contentLibraryApiUrl}/GetContentForPage/Home` });
        
    return (
        <RenderContent data={data} sectionName="topSection" wrapperStart="<div>" wrapperEnd= "</div>")
    );
 };

【讨论】：

RenderContentThumbnail 还有一个错误。他没有像他应该的那样破坏道具。 RenderContentThumbnail(data, sectionName, wrapperStart, wrapperEnd)
这太好了，谢谢你——我当时太傻了！即使这样，我仍然会遇到错误，正如buzatto 指出的那样，我认为那是因为我的 RenderContent 函数中仍然存在错误。是否有机会获得有关如何解构的帮助？我对 React 很陌生！谢谢
@Katie7，你应该改变这个。你想用 {filteredSection.title} 在 ContentThumbnail 中设置什么属性？例如：??
谢谢 lissettdm - 你说得对，我忘了指定道具。我已将其更改为：但我仍然收到错误消息。棉绒在上面的标题下划线并说：“）预期”。我将用 linting 的屏幕截图更新我的帖子！

【解决方案2】：

删除RenderContentThumbnail：

const DefaultDashboard = () => {
    const { data } = useFetchData({ queryString: `${contentLibraryApiUrl}/GetContentForPage/Home` });
    
    return (
        {data
            .filter(d => d.sectionName === "topSection")
            .map(filteredSection => (<div>
                <ContentThumbnail title={filteredSection.title} />
                </div>))
          }
    );
};

export default DefaultDashboard;

【讨论】：

感谢 lifeisfoo！这在将来会有用，但实际上我想在很多地方重用这个相同的 RenderContentThumbnail 函数。另外，我仍然收到错误，因为我认为问题在于 RenderContentThumbnail。