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

【问题标题】：Error while processing data with Redux actions使用 Redux 操作处理数据时出错
【发布时间】：2020-12-02 07:32:35
【问题描述】：

我正在尝试使用 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;

【问题讨论】：

标签： javascript reactjs redux react-redux axios

【解决方案1】：

您发布的代码存在多个问题（我假设它只是一个不完整的复制/粘贴工作），但立即跳出来的一件事是您没有从getVisibleTrainings 返回任何内容。如果您在函数末尾返回 filteredTrainings，这可能会解决您遇到的问题。

【讨论】：

我不是在 let filtersTrainings 下返回培训吗？
没有。您在作为参数传递给filter 的函数内部返回，但外部函数没有返回任何内容。

【解决方案2】：

我认为您想将state.trainings 传递给getVisibleTrainings 而不是state.filteredTrainings：

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

【讨论】：

好的，我应该如何从我的 TrainingListView 组件中获取 state.trainings？我还在我的原始帖子中更新了文件。
你有什么想法吗？