错误：无法读取未定义的属性"过滤器"，无法获取 prop

Question

我在尝试筛选出数组中的项时出错。我想这是和不正确的方式接近状态有关的，或者也许我没有得到道具。主要目的是根据搜索值筛选培训，并将其显示在列表中。

源代码：

import React from 'react';
import axios from 'axios';
import Trainings from '../components/Training';
import CustomForm from '../components/Form';
class TrainingList extends React.Component {
constructor() {
super();
this.state = {
search: ''
};
}
updateSearch(event) {
this.setState({search: event.target.value.substr(0, 20)})
}
state = {
trainings: []
}
componentDidMount() {
axios.get('http://127.0.0.1:8000/api/')
.then(res => {
this.setState({
trainings: res.data
});
console.log(res.data);
})
}
render() {
let filteredTrainings = this.state.trainings.filter(
(trainings) => {
return trainings.title.indexOf(this.state.
search) !== -1;
}
);
return (
<div>
<Trainings data={filteredTrainings} />
<input type="text"
value={this.state.search}
onChange={this.updateSearch.bind(this)}/>
</div>
)
}
}
export default TrainingList;

Answer 1

您编写：

state = {
trainings: []
}

以初始化trainings(您可以删除此代码(。但是你过滤的数据是this.state.trainings。

因此，将trainings的初始化添加到this.state:

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