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

Question

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

当我单击左侧的任何按钮时，我将该对象的 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() 都将始终返回一个相同长度的数组。如果您不返回任何东西，那么 这将是一个具有空值的稀疏数组。 尝试仅返回包含所需数据的数组。在这里，我刚刚将 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
    )
}