私はネイティブ& Reduxのに反応使用してアプリケーションを構築し、私はdataBlob
する方法をfactoriseしたい<ListView>
コンポーネントのためだ、sectionIDs
& rowIDs
されています別のファイル内に関数を作成して格納します。はネイティブ/ Reduxのに反応 - 別のファイルにReduxのストアに接続されているヘルパー関数を作成
別ファイルの中で、formatDataForListView
という名前の関数を作成したいと思います.IDの配列が渡され、Reduxストアの正しい部分が取得され、それに応じてListView
配列が構築されます。
私はちょうど要素に反応されていない、return (dataBlob, sectionIDs, rowIDs)
にしたいので、しかしリアクト要素内の機能が含まれていることを試みましたが、私はエラーを取得しています:A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
私はこれまで何をやりましたか:
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);
だから私は別のファイルにこのまっすぐなJS関数を格納し、(dataBlob, sectionIDs, rowIDs)
を取得するように反応する要素からそれを呼ぶのですか?
インポート機能をsomefile.js他のモジュールをインポートするのと同じように使用してください。 –
@RishatMuhametshinにお返事ありがとうございます。私はあなたが言うようにする方法を見ることができますが、どのようにReduxストアをその機能に接続するのですか?現在、 'formatDataForListView()'のスコープ外にある 'connect(mapStateToProps)(BookingsListViewObjectsCreator)'によって接続されています。 –
あなたはすでに必要なものを持っています。この関数を純粋に保ち、不変のデータとエンティティを分離しています。あなたの関数はレンダリングだけを行い、データは更新しません。したがって、すぐにインポートしてそのまま使用してください。唯一の違いは、関数がすべてのコンポーネントレンダリングでインスタンス化されないことです。 –