首页 / 技术问答 / Reactjs问答列表 / 问答详情

Reactjs 基于标记名的博客详细信息分组没有发生

我正试着在tagname的基础上分组blogdetails.点击第二个加号按钮，我想将所有博客详细信息分组到每个标记名下.目前，它忽略了分组，只显示标记名. 有没有人能告诉我这里可能出了什么问题？ 我已经添加了代码Sandbox 链接以供参考: https://codesandbox.io/s/eloquent-sound-dzpohx?file=/src/App.js个

const detailsTag = [
    
{
    id: 1,
    tagname: "react",
    blogdetails: "React State details" 
},
{
    id: 2,
    tagname: "unix",
    blogdetails: "Unix grep command" 
},
{
    id: 3,
    tagname: "cypress",
    blogdetails: "Cypress request command"
},
{
    id: 4,
    tagname: "react",
    blogdetails: "Usage of Context in React" 
},
{
    id: 5,
    tagname: "unix",
    blogdetails: "Unix list command" 
},
{
    id: 6,
    tagname: "react",
    blogdetails: "How to use useMemo in react hooks" 
},
    
]   
     const [detailsTags, setDetailsTags] = useState(detailsTag);
      const [filterTags, setFilterTags] = useState([]);
   

        const tags = filterTags.reduce((tags, tag) => {
            if (!tags[tag.tagname]) tags[tag.tagname] = [];
            tags[tag.tagname].push(tag.tagname);
            return tags;
          }, {});


        

                <div className='groupbyTags'>
                    <div className='row'>
                    <div className='plusBtn'>
                        <input onClick={handleClick} style={style} type="button" value="+"> </input>
                    </div>
                    {isShown && (
                        <div className='groupByTagData'>
                         {
                            groupTags.map(({ id, count, tagname }) => (
                                <div key={id} className='row'>
                                   <div className='groupByTagInfo'>
                                     <input id="childBlogBtn" onClick={() => showFullDetails(id)} style={style} type="button" value="+"></input>
                                    </div>{" "} <br></br>
                                        {isShownFullDetails === id && (
                                            <div className='groupByTagRecord'>
                                            {
            
                                             Object.entries(tags).map(([tagname, blogdetails]) => (
                                                 <div key={tagname} className="blogdata">
                                                      {blogdetails.map((data) => (
                                                        <span key={data} className="data-1">
                                                          {data.blogdetails}
                                                        </span>
                                                      ))}
                                                 </div>
                                               ))
                                            }
                                           </div>
                                        )}
                                 <div className="groupByTagInfo">
                                    <span className="groupByTagCount">{count}</span>
                                 </div>
                                 <div className="groupByTagInfo">
                                    <span className="groupByTagName">{tagname}</span>
                                 </div>
                               </div>
                             ))}
                        </div>
                    )}
                </div>
            </div>

Desired grouping of blog details for each tag looks as below: enter image description here

推荐答案

const blogdetailsForTag = (arr, search) => {
  return arr
    .filter((element) => element.tagname === search) // loop through arr and return each element that have a tagname equal to search
    .map((item) => item.blogdetails); // map through the returned array and return blogdetails for each item
}

因此，此函数返回给定数组中具有相同给定搜索值的项目的字符串数组(博客详细信息

实施:

const GroupByTags = () => {
  const [groupTags, setGroupTags] = useState(data);
  const [detailsTags, setDetailsTags] = useState(detailsTag);
  const [filterTags, setFilterTags] = useState([]);
  const [isShown, setIsShown] = useState(false);
  const [isShownFullDetails, setShowFullDetails] = useState(false);

  const style = {
    width: "30px",
    height: "30px",
    marginLeft: "20px",
    backgroundColor: "#dae0f5",
    fontWeight: "900",
    opacity: 1,
    borderColor: "#fafcff",
  };

  const handleClick = (event) => {
    setIsShown((current) => !current);
  };

  const showFullDetails = (idx) => {
    const filterdata = detailsTags.filter((item) => item?.id === idx);
    setShowFullDetails((prev) => (prev === idx ? false : idx));
    setFilterTags( // use the same logic to set filterTags
      detailsTags
        .filter((element) => element.tagname === filterdata[0].tagname)
        .map((item) => item.blogdetails)
    );
  };

  return (
    <div id="App">
      <div className="groupbyTags">
        <div className="row">
          <div className="plusBtn">
            <input
              onClick={handleClick}
              style={style}
              type="button"
              value="+"
            ></input>
          </div>
          {isShown && (
            <div className="groupByTagData">
              {groupTags.map(({ id, count, tagname }) => (
                <div key={id} className="row">
                  <div className="groupByTagInfo">
                    <input
                      onClick={() => showFullDetails(id)}
                      style={style}
                      type="button"
                      value="+"
                    ></input>
                  </div>{" "}
                  <br></br>
                  {isShownFullDetails === id && (
                    <div className="groupByTagData">
                      {filterTags.map((blogdetails, index) => (
                        <div className="blogdata" key={index}>
                          <span className="data-1">{blogdetails}</span>
                        </div>
                      ))}
                    </div>
                  )}
                  <div className="groupByTagInfo">
                    <span className="groupByTagCount">{count}</span>
                  </div>
                  <div className="groupByTagInfo">
                    <span className="groupByTagName">{tagname}</span>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default GroupByTags;

Reactjs相关问答推荐

如何在Pivot模式下自定义标题？

全局上下文挂钩-替代不起作用

react 路由导航不工作，但手动路由工作

在react.js的条形图中获取错误&unfined是不可迭代的

在Reaction中测试条件组件

如何通过浏览器路由在单独的.jsx文件中使用MUI抽屉？

这两个子元素在Reaction Native中使用的有什么不同？

在Reaction中的第一次装载时，Use Effect返回空数组

svg每条路径上的波浪动画

蚂蚁 Select .列表弹出窗口不会'；有时不会出现

Next.js `getLayout` 函数没有被调用

在React中使用if条件时如何更改Tailwind中元素的文本 colored颜色

如何在 JS 中绘制具有不同笔画宽度的样条线

使用 toast 时挂钩调用无效

类型错误：类型typeof import(js-cookie)上不存在属性get

更新和删除功能不工作 Asp.net MVC React

Storybook - 无法解析generated-stories-entry.cjs/字段browser不包含有效的别名配置

react-admin useGetIdentity 只返回全名，id 未定义 头像未定义

如何跟踪 dexie UseLiveQuery 是否完成

点击提交后自动添加#

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630