Question

我正在使用React Native＆amp; amp; Redux和<ListView>组件我想分析dataBlob，sectionIDs＆amp;的方式。 rowIDs已创建，并在单独的文件中包含该函数。

在单独的文件中，我想创建一个名为formatDataForListView的函数，该函数传递一个ID数组，利用它可以检索Redux存储的正确部分，并ListView相应地构造数组。

我试图在React元素中包含该函数但是因为我只想return (dataBlob, sectionIDs, rowIDs)，它不是React元素，我得到错误：{{1 }}

到目前为止我做了什么：

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

那么如何将这个直接的JS函数存储在一个单独的文件中并从React元素中调用它来检索import { Component } from 'react'; import { connect } from 'react-redux'; class BookingsListViewObjectsCreator extends Component { render() { const { bookings } = this.props; // function that retrieves bookings from Store and structures data // into something suitable for ListViewWithSections const formatDataForListView = bookingIDs => { const dataBlob = {}; const sectionIDs = []; const rowIDs = []; // create array of all the different products for grouping into sections console.log('bookingIDs: ', bookingIDs); bookingIDs.map((id) => { // is product already in sectionIDs array? If not, add to sectionIDs & dataBlob if (sectionIDs.indexOf(bookings[id].product_id) < 0) { sectionIDs.push(bookings[id].product_id); dataBlob[bookings[id].product_id] = bookings[id].title; } // add booking to rowIDs & dataBlob rowIDs.push(bookings[id].id); dataBlob[bookings[id].product_id + ':' + bookings[id].id] = bookings[id]; return id; }); console.log('dataBlob: ', dataBlob); console.log('sectionIDs: ', sectionIDs); console.log('rowIDs: ', rowIDs); return { dataBlob, sectionIDs, rowIDs }; }; // create objects required to render ListView and return them const { dataBlob, sectionIDs, rowIDs } = formatDataForListView(this.props.bookingIDs); return (dataBlob, sectionIDs, rowIDs); } } const mapStateToProps = state => { return { bookings: state.bookings }; }; export default connect(mapStateToProps)(BookingsListViewObjectsCreator);？

Answer 1

我认为@ oldo.nicho意味着一个看起来像这样的结构。只需从文件中导出该函数并将其导入需要该功能的组件

// somefile.js

// function that retrieves bookings from Store and structures data
// into something suitable for ListViewWithSections
export default function formatDataForListView = bookingIDs => {
  const dataBlob = {};
  const sectionIDs = [];
  const rowIDs = [];

  // create array of all the different products for grouping into sections
  bookingIDs.forEach((id) => {
    // is product already in sectionIDs array? If not, add to sectionIDs & dataBlob
    if (sectionIDs.indexOf(bookings[id].product_id) < 0) {
      sectionIDs.push(bookings[id].product_id);
      dataBlob[bookings[id].product_id] = bookings[id].title;
    }
    // add booking to rowIDs & dataBlob
    rowIDs.push(bookings[id].id);
    dataBlob[bookings[id].product_id + ':' + bookings[id].id] = bookings[id];
  });
  return { dataBlob, sectionIDs, rowIDs };
};

// otherfile.js

import { Component } from 'react';
import { connect } from 'react-redux';
import formatDataForListView from './somefile';

class BookingsListViewObjectsCreator extends Component {
  render() {
    const { bookings } = this.props;

    // create objects required to render ListView and return them
    const { dataBlob, sectionIDs, rowIDs } = formatDataForListView(this.props.bookingIDs);
    return (dataBlob, sectionIDs, rowIDs);
  }
}

const mapStateToProps = state => {
  return { bookings: state.bookings };
};

export default connect(mapStateToProps)(BookingsListViewObjectsCreator);

React Native / Redux - 在单独的文件

1 个答案: