Я могу только проанализировать мой объект mapStateToProps до степени, в которой находится мой компонент реагирования - PullRequest
Новая
       21

Я могу только проанализировать мой объект mapStateToProps до степени, в которой находится мой компонент реагирования

0 голосов
/ 05 октября 2018

Я довольно новичок в редуксе, и у меня возникают проблемы с анализом данных JSON, когда я mapStateToProps внутри моего компонента реагирования.Например, если я в 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);

Интересно, что у меня нет проблем с доступом к (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});
        });
    };
};

Если кто-то может объяснить, почему это происходит, я был бы очень благодарен.

1 Ответ

0 голосов
/ 06 октября 2018

Так что проблема в том, что вы не должны присваивать какое-либо значение во время выборки, вам нужно использовать lodash и попробовать сделать что-то вроде этого 

import _ from 'lodash'

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

if(!isFetching){
//do something
}
...