Question

当我在react组件内部进行mapStateToProps时，我对redux还是很陌生，并且在解析JSON数据时遇到了麻烦。例如，如果我在react组件中console.log（this.props.chartData [0]），则控制台将显示我尝试访问的数组，但是当我尝试通过控制台访问数组中的特定元素时日志记录（this.props.ChartData [0] .title），出现错误：

[enter image description here][1]



class ChartContainer extends Component {

    componentWillMount(){
        this.props.chartChanged();
    }

    render(){
        console.log(this.props.chartData[0]);
        return(
            <Text style={styles.textStyle}>
                test
            </Text>   
        );
    }
}



const mapStateToProps = state => {
    return {
        chartData: state.chart
    }
};


export default connect (mapStateToProps, {chartChanged}) (ChartContainer);

有趣的是，我在我的reducer内访问（this.props.ChartData [0] .title）没问题。

import {CHART_CHANGED} from '../actions/types';

const INITIAL_STATE = { chartData: [] };

export default (state = INITIAL_STATE, action) => {
        console.log(action);

 switch (action.type) {
        case CHART_CHANGED:
            console.log("action");
            console.log(action.payload[0].title);
            return{...state, chartData: action.payload};
        default: 
            return state;
    }
};

这是我的操作文件中的api调用：

export const chartChanged = (chartData) => {

return (dispatch) => {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then((chartData) =>{
            dispatch({type: CHART_CHANGED, payload: chartData.data});
        });
    };
};

如果有人可以解释为什么会这样，我将非常感激。

Answer 1

所以问题是，在获取过程中您不应分配任何值，您需要做的是使用lodash并尝试执行类似的操作

import _ from 'lodash'

const title = _.get(this.props.ChartData, 'chartData', [])

if(!isFetching){
//do something
}

我只能将我的mapStateToProps对象解析到我的react组件内部

1 个答案: