如何根据ReactJs中对象数组内部的值过滤对象数组中的数据？

我编写了一个简单的代码，将从firebase实时数据库获取的数据传递到react组件，一切正常。以下是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>

{Object.keys（this.state.gallery）
.sort（）
.map（项目=>{
//插入到组件中
返回；
})}

现在我只想将值为“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;

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./components/cubes/Cubetemplate”导入Cubetemplate；
导入“/Gallery.css”；
从“firebase”导入*作为firebase；
类库扩展组件{
//这是你给你的战友们打电话的地方
建造师（道具）{
超级（道具）；
此.state={
加载：false，
清单：[1,2,3]，
值：“”，
画廊：{}，
伊斯洛格丁：错，
};
this.readDB=this.readDB.bind（this）；//不知道这到底是什么
}
readDB（）{
var=这个；
var starCountRef=firebase.database（）.ref（“/gallery”）；
//firebase的值将在控制台中打印
starCountRef.once（'value'，快照=>{
snapshot.forEach（函数（childSnapshot）{
var childKey=childSnapshot.key；
var childData=childSnapshot.val（）；
日志（“键：+childKey+”标题：+childData.Title）；
});
setState（{isLoggedIn:true}）；
//只是为了检查快照的值
//console.log（snapshot.val（））；
//从friebase到snapshot再到news获取数据。
this.setState（{gallery:snapshot.val（）}）；
console.log（this.gallery）；
}，err=>{
//错误
控制台日志（err）；
});
};
componentDidMount（）{
这是readDB（）；
};
render（）{
返回(
{Object.keys（this.state.gallery）
.sort（）
//地图
.map（项目=>{
//插入到组件中
返回；
})}
);
}
}
导出默认库；

---

提前感谢stackoverflowers

要仅加载

类型

等于

vid

的gallery子节点，您可以使用如下Firebase查询：

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

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

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

---

关于这方面的更多信息，我强烈建议您学习上的Firebase文档。

您可以使用前面提到的Firebase筛选，或者您可以简单地执行以下条件渲染：

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

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

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

{Object.keys（this.state.gallery）
.sort（）
.map（项目=>{
//仅当项目类型为“vid”时渲染
if（this.state.gallery[项目][“类型”]=“视频”）{
;
}
})}

您能提供您的

图库的
控制台.日志吗？