Как показать картинки из массива в строку таблицы в реакции

Question

Я уже задавал этот вопрос, но получил совет спросить еще раз с более подробной информацией.

У меня есть проект для загрузки данных из firebase в реагирующую таблицу, и это сделано. Работает отлично. Проблема в том, что из этой базы данных есть картинки, которые тоже нужно показать в таблице. Из первого рисунка вы можете увидеть, как организованы данные в базе данных. данные о пожарной базе

А вот код для загрузки этих данных в ответ:

class App extends Component {


constructor(props) {
    super(props);
    this.state = {
      vehicles: []
    };
  }

  componentWillMount() {
    this.getvehicles();
  }

  getvehicles() {
    let vehicles = [];

    firebase
      .database()
      .ref(`vehicles`)
      .once('value', snapshot => {
        snapshot.forEach(level1 => {
          level1.forEach(level2 => {
            const vehicle = level2.val();
            vehicle.pictures && vehicles.push(vehicle);
          });
        });
        this.setState({
          vehicles
        });
      });
  }

На втором рисунке видно, что данные загружаются из базы данных. Данные загружены из Firebase

И код рендеринга здесь:

render() {
    const vehiclesColumns = [
      {
        columns: [
          {
            Header: 'Vehicle ID',
            id: 'vehicleID',
            accessor: d => d.vehicleID,
            filterMethod: (filter, row) =>
              row[filter.id].startsWith(filter.value)
          },
          {
            Header: 'Terminal',
            id: 'terminal',
            accessor: d => d.terminal,
            filterMethod: (filter, row) =>
              row[filter.id].startsWith(filter.value)
          },
          {
            Header: 'Time',
            id: 'timestamp',
            accessor: d => {
              return Moment(d.timestamp)
                .local()
                .format('DD-MMMM-YYYY', 'at', true);
            }
          },
          {
            Header: 'User',
            id: 'user',
            accessor: d => d.user,
            filterMethod: (filter, row) =>
              row[filter.id].startsWith(filter.value)
          }
        ]
      }
    ];

    return (
      <div style={style}>
        <div>
          <ReactTable
            style={{ marginLeft: '-80%', marginRight: '-80%' }}
            data={this.state.vehicles}
            filterable
            defaultFilterMethod={(filter, row) =>
              String(row[filter.id]) === filter.value
            }
            columns={vehiclesColumns}
            SubComponent={row => {
              return <div>PICTURES IN ROW</div>;
            }}
          />
        </div>
      </div>
    );
  }
}

Так что мой вопрос: кто-нибудь, кто бы мне помог или переписал код, массив «картинки», который вы видите на втором скриншоте, визуализируйте в «строке» примера «реагирующей таблицы»:

SubComponent={row => {
                  return <div><img src={remoteUri} key={vehicle.picture} /></div>;
                }}

Как вы можете видеть на последнем скриншоте, как должно быть и где показывать "картинки" из Firebase. РЕАКЦИОННЫЕ ДАННЫЕ С КАРТИНАМИ В СТРОКЕ

Answer 1

Уже найдено решение: Перед «рендерингом» существует «цепной» метод для соединения всех картинок с одного транспортного средства

getvehicles() {
    firebase
      .database()
      .ref(`pictures`)
      .once('value', snapshot => {
        const data = snapshot.val();
        const vehicles = _.chain(data)
          .values()
          .groupBy('vehicleId')
          .map((rows, vehicleId) => ({
            vehicleId,
            pictures: _.map(rows, 'remoteUri')
          }))
          .value();

        console.log(vehicles);

        this.setState({ vehicles });
      });
  }

На «рендер»

    const storage = firebase.storage();

const storageRef = storage.ref();
<div>
                    {row.original.pictures.map(ref => (
                      <Async
                        promiseFn={() => storageRef.child(ref).getDownloadURL()}
                      >
                        {({ isLoading, error, data }) => {
                          if (error) {
                            return 'FATALL ERROR';
                          }
                          if (isLoading) {
                            return 'Loading...';
                          }
                          if (data) {
                            return <img src={data} alt={data} key={data} />;
                          }
                        }}
                      </Async>
                    ))}
                  </div>

С этим кодом я получаю изображения в строке "Подкомпонент" в React-таблице