Question

我已经问过这个问题，但是得到了进一步详细询问的建议。

我有一个项目可以从firebase的React表中加载数据，然后就可以了。工作正常。问题是从该数据库中，也有一些图片需要在表中显示。从第一张图片中，您可以了解Firebase中的数据是如何组织的。 firebase data

这是将数据加载到react中的代码：

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加载的 Data loaded from 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的风格以及在何处显示“图片”。 REACT-TABLE DATA WITH PICTURES IN ROW

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表的“子组件”行中获取图片

如何在React中显示从数组到表行的图片

1 个答案: