Как визуализировать данные массива в строке реакционной таблицы - PullRequest
0 голосов
/ 02 апреля 2019

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

constructor(props) {
    super(props);
    this.state = {
      vehicles: []
    };
  }
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
            });
          });
      }

Отсюда данные, поступающие в реагирующую таблицу

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>
  </div>
);

Проблема в том, что я получаю "картинки" из базы данных и хочу поместить их в "субкомпонент", а я не знаю, как? Кто-нибудь, чтобы помочь?

SubComponent={row => {
          return (
            <div>
              some code here
            </div>
          );

Изображение 1 Пример данных, загруженных из базы данных

Изображение 2 Пример таблицы «нажмите на стрелку и покажите фотографии из базы данных»

=====================

Новый вопрос

Хорошо, в конце концов мне удается все сделать вместе, но ошибка 'imageUrls' не определена.

Для меня это кошмар, чтобы найти, где проблема, так есть ли кто-нибудь, кто может перепроверить этот код полностью и просто прокомментировать, как исправить и где проблема?!

    import React, { Component } from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import firebase from 'firebase';
import Moment from 'moment';
import { storage } from 'firebase';
import _ from 'underscore';

export const getFileByPath = async query =>
  await storage
    .ref()
    .child(query)
    .getDownloadURL();

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vehicles: []
    };
    this.state = {
      imageUrls: []
    };
  }
  prepareImages = () => {
    Promise.all(
      _.map(this.props.images, image => {
        return storage.getFileByPath(image.remoteUri);
      })
    ).then(results =>
      _.each(results, result => {
        const imageUrls = this.state.imageUrls;
        imageUrls.push(result);
        this.setState({ imageUrls: imageUrls, loading: false });
      })
    );
  };
  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
        });
      });
  }

  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);
            },
            filterMethod: (filter, row) =>
              row[filter.id].startsWith(filter.value)
          },
          {
            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>
                  {_.map(imageUrls, image => (
                    <img src={image} key={image} />
                  ))}
                </div>
              );
            }}
          />
        </div>
      </div>
    );
  }
}

const style = {
  display: 'flex',
  justifyContent: 'center'
};

export default App;

1 Ответ

0 голосов
/ 02 апреля 2019

Я думаю, что вы пытаетесь сделать что-то вроде:

// Somewhere else, maybe a different doc
const SubComponent = () => {
  <div>Content here</div>
}

// [...previous Code]
return (
  <ReactTable
    style={{ marginLeft: "-80%", marginRight: "-80%" }}
    data={this.state.vehicles}
    filterable
    defaultFilterMethod={(filter, row) =>
      String(row[filter.id]) === filter.value
    }
    columns={vehiclesColumns}
  >
    <SubComponent props={somePropsHere} />
  </ReactTable>
)

Я прав? Дочерние элементы Компонента не должны указываться в качестве свойства.

Привет

...