如何在 React-table 的 Row 中渲染 Array 数据

Question

我是 React 的新手。使用 react-table 组件从 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
            });
          });
      }

从这里开始数据进入 react-table

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

问题是，我正在从数据库中获取 "pictures"，并想将它们放入 "subcomponent"，但我不知道如何操作？有人帮忙吗？

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

Image 1 Example of data loaded from firebase

Image 2 Example of table "click on arrow and show pics from database"

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

新问题

好的，最后我设法将所有内容放在一起，但仍然出现错误 '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;

Answer 1

我想你想做的是：

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

我说的对吗？组件的子项不应作为属性.

给出

此致

如何在 React-table 的 Row 中渲染 Array 数据

How to render Array data in Row of react-table

arrays

reactjs

firebase

firebase-realtime-database

react-table

新问题