React-redux-firebase 填充不起作用答案

【问题标题】：React-redux-firebase populate doesn’t workReact-redux-firebase 填充不起作用
【发布时间】：2019-11-21 12:03:01
【问题描述】：

我尝试使用 populate 将我的数据中的 ID 替换为 Firebase 中的其他数据，但它不起作用。

我使用“firebase”：“^7.3.0”，“react-redux-firebase”：“^3.0.5”，“redux”：“^4.0.4”，“react-redux”：“^ 7.1.3", "redux-thunk": "^2.3.0".

我的 Firebase 数据库 click to show

App.js

import React, { Component } from 'react';
import AppContainer from './config/routes';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import thunk from 'redux-thunk';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import { firebase} from './config/firebase';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk.withExtraArgument(getFirebase)),
);

const rrfConfig = {
 userProfile: 'users',
 profileParamsToPopulate: [
   { child: 'nutrient', root: 'nutrients_list' } 
 ]
}

const reactReduxFirebaseProps = {
  firebase,
  config: rrfConfig ,
  dispatch: store.dispatch,
};

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...reactReduxFirebaseProps}>
          <AppContainer />
        </ReactReduxFirebaseProvider>
      </Provider>
    );
  }
}

config.js

import firebase from 'firebase/app';
import 'firebase/database'

const config = {
  apiKey: 'my apiKey'
  authDomain: 'my authDomain',
  databaseURL: 'my databaseURL',
  projectId: 'my projectId',
  storageBucket: 'my storageBucket',
  messagingSenderId: 'my messagingSenderId',
  appId: 'my appId',
  measurementId: 'my measurementId',
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export { firebase }

Food.js（在这个组件中我使用填充）

import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { firebaseConnect, populate, isLoaded, isEmpty } from 'react-redux-firebase';

class Food extends Component {
render() {
    const { mealsArray } = this.props;

    if (!isLoaded(mealsArray)) {
      return <ActivityIndicator size="large" />
    }

    if (isEmpty(mealsArray)) {
      return <Text>There is no meals </Text>
    }

    return (
      <View>
        <ScrollView>
          <Text>{JSON.stringify(mealsArray, null, 2)}</Text>
        </ScrollView>
      </View>
    );
  }

const populates = [
  { child: 'nutrient', root: 'nutrients_list' }
]

const mapStateToProps = state => {
    return {
    mealsArray: populate(state.firebase, 'meals', populates)
  };
};

export default compose(
  firebaseConnect([
    { path: 'meals', queryParams: ['orderByChild=date', 'equalTo=18/11/2019'], populates},
  ]),
  connect(
    mapStateToProps,
  ),
)(Food);

我希望关键的“营养素”返回对象而不是 id 号：

{
  nutrient: {
    name: 'buckwheat',
    proteins: 12.6,
    fats: 2.6,
    carbs: 68,
    calories: 329,
    water: 10,
  },
  number: 1,
  weight: 100,
}

【问题讨论】：

有什么想法吗？有人可以帮助我吗？

标签： firebase react-native react-redux-firebase

【解决方案1】：

您似乎正在尝试在列表（膳食）中的每个项目中填充项目（营养）列表，该列表有两个层次。 populate 目前不支持多层次的深度填充，您最好为每餐提供一个单独的组件。然后在每个膳食成分中，您可以循环遍历营养素并在每个单一营养素上运行填充。

相反，最好只为每种营养素存储一个唯一的密钥，然后将有关膳食中营养素的元信息存储在另一个密钥下，可能是nutrients_amounts 或nutrients_meta

它还将使用由push 生成的唯一键作为项目键，而不是数组索引。这使得在数据库的另一部分中引用值变得更加容易，并且有助于避免出现稀疏数组的情况。

【讨论】：