Как отфильтровать данные из массива объектов по значению внутри себя в ReactJs?

Question

Я написал простой код для передачи данных, взятых из базы данных 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. Как мне выполнить sh это?

---

Вот полный код, чтобы лучше понять ситуацию:

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 !

Answer 1

Вы можете использовать фильтрацию по огненной базе, как упомянуто Фрэнк , или вы можете просто сделать условный рендеринг следующим образом:

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

Answer 2

Чтобы загрузить только дочерние узлы галереи с type, равным vid, вы должны использовать запрос Firebase, например:

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

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

. Более подробно я настоятельно рекомендую изучить Firebase. документация по заказ и фильтрация данных .