javascript - React:在搜索框中过滤
问题描述
我正在尝试对从 API 获得的数据进行过滤。这是我尝试过的:
class ApiComponent extends Component {
constructor() {
super();
this.state = {
pizzas: [],
input: "",
};
}
onChangeHandler(e) {
this.setState({
input: e.target.value,
});
}
componentWillMount() {
axios.get("api/pizzas").then((Response) => {
this.setState({
pizzas: JSON.parse(JSON.stringify(Response.data)),
});
});
}
render() {
const list = this.state.pizzas
.filter((d) => this.state.input === "" || d === this.state.input)
.map((d, index) => <li key={index}>{d}</li>);
return (
<div className="container">
<form>
<input
value={this.state.input}
type="text"
onChange={this.onChangeHandler.bind(this)}
placeholder="search"
/>
</form>
{this.state.pizzas.map((pizza) => (
<ul key={pizza.id}>
{pizza.area_id}  {pizza.name} 
{pizza.real_name}
</ul>
))}
</div>
);
}
}
每当我尝试在搜索框中输入任何内容时,都会收到此错误:
未捕获的类型错误:d.includes 不是函数
我正在使用 es6。所以包括应该在那里。
解决方案
推荐阅读
- c# - 没有接口时如何模拟 SecretClient?
- react-native - 当 ArrayBuffer 不存在时从获取响应中读取二进制数据
- python - 根据列号和条件删除文本文件中的记录 - python
- node.js - 与 create-react-app 相关的 Heroku 部署问题
- .net - 如何仅从连接字符串中检测 DbConnection 类型名称
- c# - Oracle ORA-06502 c# 中的过程出现数值或值错误
- angular - 如何在离子日期时间组件中设置最大秒数
- flutter - 如何在 Flutter 中创建带边框的圆形按钮?
- r - R 日期未在 tableOutput 中正确显示(闪亮)
- java - 让 CompletableFuture exceptionly() 处理 supplyAsync() 异常