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

问题描述

我正在尝试使用 Redux 操作为我的 React webapp 构建过滤系统。我想我已经正确设置了一切，但不知何故我的数据没有通过。我的格式有误吗？这里可能有什么问题？

这是我的 VisibleTrainingsList.js 文件，它应该根据使用 visibilityFilter 操作发送的当前过滤器过滤我的培训（作为项目）：
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)

这是实际的培训列表，它从以前的文件中获取培训并将它们作为数据放入另一个培训组件中。
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;

标签： javascriptreactjsreduxreact-reduxaxios

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

问题描述

解决方案

推荐阅读