时间戳

首页 > 解决方案 > 无法映射控制台中看到的对象的值

javascript - 无法映射控制台中看到的对象的值

问题描述

我的想法是单击左侧导航栏上的任何按钮，只要对象中单击的按钮的名称与内对象logos中的任何名称匹配，然后显示这些对象。itemsprojects

当我单击左侧的任何按钮时，我将该对象的active属性转换true为对象内logos。在我过滤了这些值之后，我可以在控制台中看到所有正确的值，但是我无法循环它们——使用for循环或map. 奇怪的是，当我写作时，filteredValues[0]我能够将该数据输出到屏幕上，但由于我想要其中一些点击值的多个输出，所以这不是一个选项。任何帮助表示赞赏。谢谢！

这些是我在控制台记录它们时返回的项目 这些是我无法循环通过但在控制台记录它们时会返回的项目

这些是我的项目

这些是我的项目

这些是我的标志

这些是我的标志

 const Homepage = () => {

  const {state} = useContext(Context)
  const {projects,logos} = state;

  return (
    <>
  <div className="container">

    <Language />

    <div className="homepage">
          {logos.map(logo => {

            let filteredValues;

            if(logo.active == true){
              filteredValues = Object.values(projects).filter(({items}) => Object.values(items).includes(logo.name))

              filteredValues.map((val) =>{
                console.log(val)
                  return(
                        <div>{val.title}</div>
                      )
                    }) //end of filteredValues.map
                } //end of if
              }) // end of logos.map
            }
    </div>
  </div>
  </>
)}

标签： javascriptreactjsfilteringjavascript-objectses6-map

解决方案

Array.map() 将始终返回相同长度的 Array，无论您是否返回任何内容。如果您不返回任何内容，那么它将是一个具有空值的稀疏数组。尝试仅返回包含所需数据的数组。在这里，我刚刚将 Logos 逻辑分离到一个单独的变量中。

render() {

    const Logos = (
        <div className="homepage">
            logos.reduce((acc, logo) => {
                if (logo.active) {
                    const filteredValues = Object.values(projects).filter(({items}) => Object.values(items).includes(logo.name));
                    Object.values(projects).forEach(({items}) => {
                        if (Object.values(items).includes(logo.name)) {
                            acc.push((<div>{val.title}</div>));
                        }
                    });
                }
                return acc
            }, [])
        </div>
    )

    return (
        <div className="container">
            <Language />
            {Logos}
        // rest of the code
    )
}

推荐阅读