Question

我有一个连接了Firebase的应用程序。我能够在每个步骤的控制台日志中查看Firebase传递的数据，但是当im在组件级别时，它总是返回空。

import * as firebase from "firebase";
import { GET_LIST } from './types';



export const getListThunk = () => {
    return (dispatch) => {
        const teams = [];
        const teamsObj = {};
        var that = this;
        var ref = firebase.database().ref('SignUp/' + "577545cf-c266-4b2e-9a7d-d24e7f8e23a5");
        //var query = ref.orderByChild("uuid");
        console.log("uuid thunk ");

        ref.on('value', function (snapshot) {
            console.log("snap ", snapshot.val())
            snapshot.forEach(function (child) {

                let currentlike = child.val()
                    console.log("schedas ", currentlike)
                    teams.push(currentlike);

                    console.log("teams ",teams);



            });
            dispatch({ type: GET_LIST, payload: teams})
        })


    }

}

在这里的所有控制台日志中，我都可以从firebase接收信息。控制台显示：

现在，我检查了我的减速器，看看是否可以在那看到我的信息。

import { GET_LIST } from '../actions/types';
const INITIAL_STATE = {
    jello: 'hello'
};

const listReducer = (state = INITIAL_STATE, action) => {


    switch (action.type){
        case GET_LIST:
            console.log("action ", action.payload);
            return action.payload;
        default:
        console.log("default ");
            return state;
    }

};

export default listReducer;

此控制台日志中标有action的也显示了有效负载

因此，我再次能够看到reducer有效负载中的数据。

现在检查我的组件，我假设调用this.props将再次显示数据，但是显示为空。

组件：

mport React, { Component } from "react";
import {
    View,
    StyleSheet,
    Button,
    SafeAreaView,
    ScrollView,
    Image,
    TouchableOpacity,
    Alert,
    Animated,
    FlatList
} from "react-native";
import {connect} from 'react-redux';
import { getListThunk } from '../actions';
import Form from '../components/Form';
import firebase from "firebase";
import * as theme from '../theme';
import Block from '../components/Block';
import Text from '../components/Text';
import App from "../../App";



class RenderRequests extends Component {
    constructor(props) {
        super(props);
        this.params = this.props;
        uuid2 = this.props.uuid;
    }
    componentWillMount(){
        this.props.getListThunk();

    }
    componentDidMount(){
        console.log("did mount " , this.params.uuid)
        var uuid = this.params.uuid;

        //this.props.getListThunk({uuid});

    }


    render() {
        console.log("Component level array " ,this.props)
        return (
            <View>
            <Text> {this.params.uuid} </Text>

            </View>

        );
    }
}

export default connect(null, { getListThunk })(RenderRequests);

现在，控制台登录将显示一个空数组：

请注意，该日志文件中的UUID是我作为道具从上一个屏幕传递的UUID。如您所见，“ getListThunk”为空。

-------- 编辑 ------------------------我已根据以下内容添加了代码Vinicius Cleves说。但是，我必须使它成为{list：state}而不是{list：state.listReducer}

我现在在控制台中看到它。但是，它似乎出现了，然后运行默认操作，并且我的状态被重置为空。下面是我的控制台的屏幕截图：

如果看到我的减速器代码，则在调用默认操作时正在记录。为什么在最初的“ GET_LIST”操作被调用后被调用了这么多次。这将继续用默认状态替换我的状态。

Answer 1

getListThunk是一个函数，与预期的一样。要在this.props中访问所需信息，应提供一个mapStateToProps函数以进行连接。

export default connect(
  state=>({someVariableName: state.listReducer}), 
  { getListThunk }
)(RenderRequests);

现在，您在this.props上丢失的信息将显示在this.props.someVariableName下

Redux-Thunk无法在组件中获取道具

1 个答案: