Отображение в JS реагирует с FireBase

Question

У меня есть две коллекции, которые являются «темами» и «пользователями», и я хочу отобразить их в одной и той же функции стрелки, чтобы можно было получать user.email, topic.topic и topic.date только одной функцией стрелки.Я хочу сопоставить различные коллекции из Firebase в одной функции стрелки.Это мой код:

   import React, { Component } from "react";
   import { Link } from "react-router-dom";
   import { compose } from "redux";
   import { connect } from "react-redux";
   import { firestoreConnect } from "react-redux-firebase";
   import PropTypes from "prop-types";
   import Spinner from "../layout/Spinner";

   class Topics extends Component {
     state = {};

     render() {
      const { topics, users } = this.props;

      if ((topics, users)) {
        return (
           <div>
             <div className="row">
               <div className="col-md-6 text-center text-info">
                <h2>
                  <i className="fas fa-comments" /> Micro Bloggin
                 </h2>
               </div>
              </div>
              <table className="table table-striped">
                <thead className="thead-inverse">
                  <tr>
                    <th>User</th>
                    <th>Topic</th>
                    <th>Date</th>
                  </tr>
                 </thead>
                 <tbody>
               <--!here I want to introduce user.email instead of 
                   //topic.Username -->
                  {topics.map(topic => (
                     <tr>
                       <td>{topic.userName}</td>
                       <td>{topic.topic}</td>
                       <td>{topic.date}</td>
                    </tr>
                  ))}
               </tbody>
              </table>
            </div>
          );
        } else {
         return <Spinner />;
         }
       }
    }

     Topics.propTypes = {
     firestore: PropTypes.object.isRequired,
     topics: PropTypes.array,
     users: PropTypes.array
    };
   <--!here I call the two collections -->
   export default compose(
   firestoreConnect([{ collection: "topics" }, { collection: "users" 
   }]),
      connect((state, props) => ({
      topics: state.firestore.ordered.topics,
      users: state.firestore.ordered.users
   }))
   )(Topics);

Answer 1

Если значение userName также доступно в коллекции users, возможно, вы можете попробовать что-то вроде этого:

 {topics.map(topic => (
                     <tr>
                       <td>
                        {users.find(user=>user.userName === topic.userName).email}
                        </td>
                        <td>{topic.topic}</td>
                        <td>{topic.date}</td>
                      </tr>
                      ))}