如何解决根据React应用中的Redux操作过滤数据时出错
我在获取过滤格式的数据时遇到了一些问题。我通过API从axios获取数据,然后从状态中获得过滤器,该过滤器指出了过滤数据的方式。我过滤从我的TrainingList中获得的培训,并将其作为ownProps获得。在我的示例中,获取培训的方法是否正确?或者这里可能存在问题?
发生过滤的文件:
VisibleTrainingList.js:
import { connect } from 'react-redux';
import TrainingList from '../containers/TrainingListView';
import { VisibilityFilters } from '../store/actions/filter';
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;
}
}
function mapStateToProps(state,ownProps) {
const { visibilityFilter } = state
const { trainings } = ownProps
const filteredTrainings = getVisibleTrainings(state,trainings)
return { filteredTrainings,visibilityFilter }
}
export default connect(mapStateToProps,none)(TrainingList)
与Redux连接并且我的trainingList组件位于的Presentational组件:
TrainingListView.js:
import React from 'react';
import axios from 'axios';
import Trainings from '../components/Training';
import CustomForm from '../components/Form';
import Filter from '../components/Filtering';
import './Style.css';
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} trainings={this.state.trainings}/>
</div>
);
}
}
export default TrainingList;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。