使用 Redux 操作处理数据时出错

Question

I am trying to build filtering system to my React webapp using Redux actions. I think i have set up everything correctly but somehow my data doesn't come through. Have i formatted something incorrectly? What could be issue here?

Here is my VisibleTrainingsList.js file that should filter my trainings (as items) based on current filter that is sent with visibilityFilter action:
VisibleTrainingsList.js:

import { connect } from 'react-redux';
import TrainingList from '../containers/TrainingListView';
import { VisibilityFilters } from '../store/actions/filter';

constructor() {
        super();
        this.state = {
            trainings: []
        };
}

state = {
        trainings: []
}

    componentDidMount() {
        axios.get('http://127.0.0.1:8000/api/')
            .then(res => {
                this.setState({
                    trainings: res.data
                });
                console.log(res.data);
            })
    }



const getVisibleTrainings = (trainings, filter) => {
    switch (filter) {
        case VisibilityFilters.SHOW_ALL:
            let filteredTrainings = this.state.trainings.filter(
                (trainings) => {
                    return trainings
                }
            );
            return filteredTrainings;
        case VisibilityFilters.SHOW_TARTU:
            let filteredTrainings = this.state.trainings.filter(
                (trainings) => {
                    return trainings.location.toLowerCase().indexOf('tartu') !== -1;
                }
            );
            return filteredTrainings;
        case VisibilityFilters.SHOW_TALLINN:
            let filteredTrainings = this.state.trainings.filter(
                (trainings) => {
                    return trainings.location.toLowerCase().indexOf('tallinn') !== -1;
                }
            );
            return filteredTrainings;

    }
}

const mapStateToProps = state => ({
    filteredTrainings: getVisibleTrainings(state.trainings, state.visibilityFilter)
})

export default connect(mapStateToProps, none)(TrainingList)

Here is actual trainings list that gets trainings from previous file and puts them into another Trainings component as data.
TrainingListView.js:

class TrainingList extends React.Component {

    constructor() {
        super();
        this.state = {
            trainings: []
        };
    }


    state = {
        trainings: []
    }

    componentDidMount() {
        axios.get('http://127.0.0.1:8000/api/')
            .then(res => {
                this.setState({
                    trainings: res.data
                });
                console.log(res.data);
            })
    }

    render() {
        return (
        <div>
            <Filter />
            <Trainings data={this.props.filteredTrainings} />

        </div>
        );
    }
}

export default TrainingList;

Answer 1

There are multiple issues with the code you posted (I'm assuming it's just an incomplete copy/paste job), but one thing that jumps out immediately is you are not returning anything from getVisibleTrainings . If you return filteredTrainings at the end of the function, that may solve the issue you're seeing.

Answer 2

I think you want to pass state.trainings to getVisibleTrainings instead of state.filteredTrainings :

const mapStateToProps = state => ({
    filteredTrainings: getVisibleTrainings(state.trainings, state.visibilityFilter)
})