我正在尝试通过从API提取数据来制作基本应用。
我现在正尝试通过数组从该数据中筛选出一个值。
我正在使用react-search-input并获得"TypeError: Cannot read property 'filter' of undefined"
,但我不明白为什么。
我需要怎么做才能避免此错误?
此处的代码:
import React, { Component } from 'react';
import SearchInput, {createFilter} from 'react-search-input'
const API = 'https://swapi.co/api/people/';
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
searchTerm: '',
}
this.searchUpdated = this.searchUpdated.bind(this)
}
componentWillMount() {
this.fetchData();
}
fetchData = async () => {
const response = await fetch(API);
const json = await response.json();
this.setState({ items: json.results })
}
render() {
const items = this.state.items;
const filteredData = items.results.filter(createFilter(this.state.searchTerm, items.results))
return (
<div>
<SearchInput className="search-input" onChange={this.searchUpdated} />
<div className="row">
{filteredData.map((item, i) =>
<div className="col-md-4" key={i}>
<a href={item.url}>{item.name}</a>
<p>Caractéristiques :</p>
<ul>
<li>Année de naissance : {item.birth_year}</li>
<li>Taille : {item.height} cm</li>
<li>Masse : {item.mass}</li>
<li>Couleur des yeux : {item.eye_color}</li>
<li>Couleur de cheveux : {item.hair_color}</li>
<li>Couleur de peau : {item.skin_color}</li>
</ul>
</div>
)}
</div>
</div>
)
}
searchUpdated (term) {
this.setState({searchTerm: term})
}
}
export default App;
答案 0 :(得分:1)
您正在尝试访问results
上的this.state.items
属性,该属性被声明为空数组。您应该像这样声明items
:
this.state = {
items: { results: [] },
searchTerm: '',
}
...
const items = this.state.items;
items.results.filter(createFilter(this.state.searchTerm, items.results))
或简单地将results
声明为数组并使用它:
this.state = {
results: [],
searchTerm: '',
}
...
this.state.results.filter(createFilter(this.state.searchTerm, this.state.results))
答案 1 :(得分:0)
您遇到语法错误。您正在尝试访问阵列上的result
键。
// items is an array, arrays don't have keyword result
const filteredData = items.results.filter(createFilter(this.state.searchTerm, items.results))