Question

在我之前的尝试失败之后，我运行了git stash并重新开始，最后执行了return（调度）中的代码。不幸的是，它开始执行两次，但是仍然没有填充状态（或者通过执行两次它覆盖了状态）。

这是我的代码：

DivisionManagement \ index.js

import React, {Component} from "react";
import {View, FlatList, Alert} from "react-native";
import {withNavigation} from "react-navigation";
import {connect} from "react-redux";

import PortableButton from "./../../components/PortableButton";

import masterStyles, {listPage, bigButtonStyles} from "./../../styles/master";

import DivisionManagementRow from "./DivisionManagementRow";
import { loadDivisions } from "../../redux/actions/divisionActions";

class DivisionManagmementScreen extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {

        console.log(`Entered componentDidMount(), props: ${JSON.stringify(this.props)}`);
        this.props.getAllDivisions(1);
        console.log(`props again: ${JSON.stringify(this.props)}`);
    }


    _renderItem = ({item}) => {
        console.log(`item: ${JSON.stringify(item)}`);
        return (
        <DivisionManagementRow divisionId={item.DIVISION_ID} divisionName={item.DIVISION_NAME}
            onAddTeam={() => {this._addTeam(item.DIVISION_ID)}}
            onEdit={() => {this._editDivision(item.DIVISION_ID)}}
            onDelete={() => {this._btnDeleteDivision(item.DIVISION_ID)}}/>        

    )};


    render() {
        console.log(`Props in render: ${JSON.stringify(this.props)}`);
        return (
            <View style={masterStyles.component}>
                <View style={listPage.listArea}>
                    <FlatList 
                        data={this.props.divisions}
                        renderItem={this._renderItem}
                        keyExtractor={(item) => item.DIVISION_ID.toString() } />
                </View>        
                <View style={listPage.bottomButtonArea}>
                    <PortableButton defaultLabel="Add Division"
                        disabled={false}
                        onPress={() => {this._addDivision()}}
                        onLongPress={() => {}}
                        style={bigButtonStyles} />
                </View>
            </View>
        );
    }
}

function mapStateToProps(state) {
    console.log(`State: ${JSON.stringify(state)}`);
    return {
        programId: state.programId,
        divisions: state.divisions,
        isLoading: state.isLoadingDivisions
    }
}

function mapDispatchToProps(dispatch) {
    return {
        getAllDivisions: (programId) => dispatch(loadDivisions(programId))
    };
}

export default withNavigation(connect(mapStateToProps, mapDispatchToProps)(DivisionManagmementScreen));

divisionActions.js

import {query2} from "./../../util/DbUtils";

export const DIVISIONS_LOADING = "DIVISIONS_LOADING";
export const DIVISIONS_BY_PROGRAM = "DIVISIONS_BY_PROGRAM";
export const DIVISIONS_POPULATE = "DIVISIONS_POPULATE";

export function loadDivisions(programId) {
    console.log(`loadDivisions, programId: ${JSON.stringify(programId)}`);
    let result = (dispatch) => {
        dispatch(isLoadingDivisions(true));
        query2("SELECT * FROM DIVISION WHERE DIVISION_PROGRAM_ID = ?", [programId])
            .then((queryResults) => {
                console.log("Query results: " + JSON.stringify(queryResults));
                return queryResults;
            }).then((queryResults) => {
                dispatch(isLoadingDivisions(false));
                return queryResults;
            }).then((queryResults) => {
                console.log("Dispatching query results " + JSON.stringify(queryResults));
                dispatch(populateDivisions(queryResults.result));
                //return queryResults;
            });
    }
    return result;
}

export function isLoadingDivisions(value) {
    console.log(`Entered isLoadingDivisions, value: ${value}`);
    return {
        type: DIVISIONS_LOADING,
        payload: value
    }
}

export function getDivisionsByProgram(programId) {
    return {
        type: DIVISIONS_BY_PROGRAM,
        payload: programId
    }
}

export function populateDivisions(divisions) {
    console.log(`populateDivisions(), divisions: ${JSON.stringify(divisions)}`);
    return {
        type: DIVISIONS_POPULATE,
        payload: divisions
    }
}

divisionReducer.js

import { DIVISIONS_LOADING, DIVISIONS_BY_PROGRAM } from "../actions/divisionActions";
import {loadDivisions} from "../actions/divisionActions";

export function isLoadingDivisions(state = false, action) {
    console.log(`Entered isLoadingDivisions: ${JSON.stringify(action)}`);
    switch (action.type) {
        case DIVISIONS_LOADING:
            return action.payload;
        default:
            return state;
    }
}

export function divisions(state = [], action) {
    console.log("Entered divisions()");
    switch (action.type) {
        case DIVISIONS_BY_PROGRAM:
        let divisions = loadDivisions(action.payload);
            console.log(`Divisions in divisions(): ${JSON.stringify(divisions)}`);
            return divisions;
        default:
            return state;
    }
}

reducers \ index.js

import {combineReducers} from "redux";

import {isLoadingDivisions, divisions} from "./divisionReducer";

export default rootReducer = combineReducers({
    isLoadingDivisions,
    divisions
});

这里应该发生的是状态应该有一个条目：

{ divisions: // populated array }

相反，我得到这个：

{ divisions: [] }

（第二个对应于初始状态，所以也许它被覆盖了？）

因此我在此代码中遇到一个或潜在两个问题：

它根据日志执行两次
状态中的除法数组未填充。

有人可以帮忙吗？

React-Native，Redux和Thunk：执行两次但不填充状态的异步函数

0 个答案: