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

Question

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

当我单击左侧的任何按钮时，我将该对象的 active 属性转换为 logos 对象中的 true。过滤值后，我可以在控制台中看到所有正确的值，但我无法遍历它们 - 使用 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>
  </>
)}

Answer 1

一个 Array.map() 总是 return 一个相同长度的数组，不管你有没有 return 任何东西。如果你什么都不 return 那么它将是一个具有空值的稀疏数组。尝试只 returning 包含所需数据的数组。在这里，我刚刚将徽标逻辑分离到一个单独的变量中。

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
    )
}

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

Cannot map value of object seen in console

javascript

filtering

javascript-objects

reactjs

es6-map