Question

我有以下组件调用Factory来创建英雄和单元格，一旦数组已满，将其传递给具有相同名称的状态变量。

Field.js

account@client.com

有我的reducer文件：

index.js（reducer file）

import React,{Component} from 'react';
import { connect } from 'react-redux';

import _ from "lodash";

import Factory from './../Factory/Factory';
import { addHero, addCell } from './../../store/actions/actionsCreator';

class Field extends Component {

    componentWillMount(){
        let heros = [],
            cells = [];

        //id=0 will throw a error, always start with 1
        for (let i = 1; i < 3; i++) {
            heros.push(this.callFactory('hero', i));
        }
        this.props.addHero(heros);

        for (let i = 1; i < 4; i++) {
            for (let j = 1; j < 12; j++) {
                let cell = this.callFactory('cell', j, i);
                cells.push(cell);
            }
        }
        this.props.addCell(cells);

        this.movePerson(1, {x: 2, y: 1});
    }


    callFactory(type, id, number){
        return Factory.build(type, id, number)
    }


    render() {
        const {heros,cells} = this.props;

        if(heros === undefined) return null;

        // console.log(this.props);

        return (
            <div>
                <table>
                    <tbody>
                        <tr>
                            {cells[0]}
                        </tr>
                    </tbody>
                </table>
                {heros[0]}
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        heros: state.heros,
        cells: state.cells
    }
}

const mapDispatchToProps = dispatch => {
    return {
        addHero(hero) {
            dispatch(addHero(hero));
        },
        addCell(cell) {
            dispatch(addCell(cell));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Field);

包含我所有操作的文件：

actionCreator.js

import {createStore } from 'redux'

const initialState = {
    heros: [],
    cells: []
};

const reducer = (state, action) => {

    switch (action.type) {
        case 'ADD_HERO':
            return {
                ...state,
                heros: [...state.heros, action.hero]
            }

        case 'ADD_CELL':
            return {
                ...state,
                cells: [...state.cells, action.cell]
            }

        default:
            return {
                ...state
            }
    }

}

export default createStore(reducer, initialState);

我的应用入口点：

index.js

const addHero = hero => {
    return {
        type: 'ADD_HERO',
        hero
    }
}

const addCell = cell => {
    return {
        type: 'ADD_CELL',
        cell
    }
}


export {  addHero, addCell };

这里的关键问题是当我尝试在任何时候记录我的道具值它将被记录为未定义，但如果我在里面记录道具渲染它将被调用2次，第一个被调用为undefined而第二个被调用更新状态。有没有办法处理这个问题所以我可以在渲染之外使用道具值？

Answer 1

请看这两个反应组件循环。第一个是componentDidMount（）。您应该使用此方法而不是componentWillMount（）。第二个是componentWillReceiveProps（nextProps）。借助此方法，您可以看到nextProps和当前支持的更改。

Answer 2

正如@brub和@yasinv所指出的，主要问题是调用ComponentWillMount中的所有逻辑而不是ComponentDidMount。如果有人在同一个地方，我决定将这些信息（heros和cells）作为道具传递给我的Field组件，然后触发ComponentDidMount来处理这些数据。

Redux状态已更新，但道具仍然未定义

2 个答案: