Question

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

2020-05-13

85

javascript reactjs filtering javascript-objects es6-map

我的想法是点击左侧导航栏上的任意按钮，只要 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
    )
}