在 ReactJs 中，如何根据对象数组的属性值过滤数据？答案

【问题标题】：How to filter data from an object array according to their property values, in ReactJs?在 ReactJs 中，如何根据对象数组的属性值过滤数据？
【发布时间】：2020-07-11 21:50:21
【问题描述】：

我编写了一个简单的代码，通过对象数组将来自firebase real time database 的所有数据传递到名为cubetemplate 的反应组件中。这是我用来做测试的firebase的截图：

这是我使用的代码：

<div className="gal">
   {Object.keys(this.state.gallery)
   .sort()
   .map(item => {
   //inserting into the component
   return <Cubetemplate source={this.state.gallery[item]["img"]} key={item}/>;
   })}
</div>

现在，问题是，我只想将验证条件"type"="vid" 的对象传递给Cubetemplate 组件。我该如何做到这一点？

这是完整的代码，可以更好地了解情况：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Cubetemplate from './components/cubes/Cubetemplate';
import './Gallery.css';
import * as firebase from 'firebase';

class Gallery extends Component {

  //this is the place where you declar your vars
  constructor(props) {
      super(props);
      this.state = {
          loading: false,
          list: [1, 2, 3],
          value: '',
          gallery:{},
          isLoggedIn: false,
      };
      this.readDB = this.readDB.bind(this); //no idea what the hell this is

  }


readDB() {
 
  var that = this;

  var starCountRef = firebase.database().ref("/gallery");


  //the values from the firebase will be printed in the console
  starCountRef.once('value', snapshot => {
      snapshot.forEach(function (childSnapshot) {
          var childKey = childSnapshot.key;
          var childData = childSnapshot.val();

          console.log("Key: " + childKey + " Title: " + childData.title);

      });
      that.setState({ isLoggedIn: true });


      //just to check the values of snapshot
      // console.log(snapshot.val());

      //takes the data from friebase to snapshot to news.
      this.setState({ gallery: snapshot.val() });
      console.log(this.gallery);

  }, err=> {

    //errors
      console.log(err);
  });
};


componentDidMount(){
  this.readDB();
};

render() {
  return (


  
    <div className="gallerycontainer">       

      <div className="gal">
      
        {Object.keys(this.state.gallery)
        .sort()

        //map
        .map(item => {

          //inserting into the component
          return <Cubetemplate source={this.state.gallery[item]["img"]} key={item}/>;
        
        })}

      </div>
    </div>

  );
 }
}
    
export default Gallery;

提前感谢stackoverflowers！

【问题讨论】：

您能提供您的gallery 的console.log 吗？

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

要仅加载 type 等于 vid 的库子节点，您可以使用这样的 Firebase 查询：

var galleryRef = firebase.database().ref("/gallery");
var query = galleryRef.orderByChild("type").equalTo("vid");

query.once('value', snapshot => {
  ...

如需了解更多信息，我强烈建议您研究 ordering and filtering data 上的 Firebase 文档。

【讨论】：

【解决方案2】：

你可以使用像 Frank 这样提到的 firebase 过滤，或者你可以简单地做一些这样的条件渲染：

<div className="gal">
{Object.keys(this.state.gallery)
   .sort()
   .map(item => {
   //Only render if the item type is 'vid'
   if (this.state.gallery[item]["type"] == "vid") {
       <Cubetemplate source={this.state.gallery[item]["img"]} key={item}/>;
   }

   })}
</div>

【讨论】：