React - 按对象属性过滤

Posted 2023-02-27

【中文标题】React - 按对象属性过滤

【英文标题】：React - filter by object property

【发布时间】：2017-09-22 11:29:49

【问题描述】：

我正在尝试按属性过滤对象，但无法正常工作。

对象中的数据结构如下：

我正在通过 UID 获取数据，然后映射该对象中的所有项目，但我无法使过滤器工作。

渲染方法如下：

  render() 
    return(
      <div>
        Object.keys(this.state.dataGoal)
          .filter(key => key.main == true)
          .map( (key, index) => 
            return <div key=key>
                     <h1>this.state.dataGoal[key].name</h1>
                     <p>this.state.dataGoal[key].main</p>
                   </div>
          )
      </div>

任何想法我做错了什么？

感谢您的帮助， 雅库布

【问题讨论】：

什么是this.state.dataGoal？

【参考方案1】：

假设 this.state.dataGoal 是来自发布的目标数组的对象，那么您的过滤器是错误的。应该是：

Object.keys(this.state.dataGoal)
  .filter(key => this.state.dataGoal[key].main === true)
  .map((key, index) => 
    return <div key=key>
             <h1>this.state.dataGoal[key].name</h1>
             <p>this.state.dataGoal[key].main</p>
           </div>
  )

注意，现在是.filter(key => this.state.dataGoal[key].main === true)，因为键是字符串，类似于Khasdfasdfasdfasdfads，并且您想通过此键访问goal 对象以检查其main 属性。

【参考方案2】：

Object.keys 返回该对象的keys，这意味着它返回一个包含该对象中每个键的字符串数组。

obj =  'a': 1, 'b': 2 ;
Object.keys(obj); // ['a', 'b']

因此，要访问该属性的值，您必须使用该键访问它，在您的情况下，它将是这样的：

filter(key => this.state.dataGoal[key].main == true)

【讨论】：

非常感谢，这是解决方案。