如何在React中显示从数组到表行的图片 [英] How to show pictures from Array to table row in react

问题描述

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

I already asked this question but got advice to ask again with more details.

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

I have project to load data from firebase in react-table, and that is done. Working perfectly. Problem is that from that database, there are pictures which need to be showed in table too. From first Picture you can see how data in firebase is organized. firebase data

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

And here is code to load that data in 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加载的 从Firebase加载的数据

From second picture you can see that data is loaded from 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>
    );
  }
}

所以我的问题是，任何要帮助我或重写代码图片"数组的人，您可以在第二个屏幕截图中看到这些内容，并在反应表"示例的行"中进行渲染:

So my question is, anyone to help me, or rewrite the code, "pictures" array what you can see on second screenshot, render in "row" of "react-table" example:

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

如您在上一个屏幕截图中所见，Firebase的功能以及在何处显示图片". 行中带有图片的反应表数据

As you can see on the last screenshot, how sould be and where to show "pictures" from Firebase. REACT-TABLE DATA WITH PICTURES IN ROW

推荐答案

已找到解决方案: 在渲染"之前，有一种链式"方法可以将一辆车上的所有图片连接起来

Already found solution: Before "render" there is "chain" method to connect all pictures from one vehicle

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-table的子组件"行中获取图片

With this code Im getting pictures in row of "Subcomponent" in React-table

这篇关于如何在React中显示从数组到表行的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！