javascript - 尝试过滤产品列表时反应“TypeError:product.name.includes(...).map is not a function”
问题描述
我有一个 React 应用程序,它在使用 axios.get 调用从数据库获取产品数据时显示产品列表。这部分工作得很好,但是今天我尝试实现一个搜索功能,只显示与搜索查询匹配的产品名称,但是当我尝试输入一个字母时,应用程序崩溃了,我得到了这个:
TypeError: product.name.includes(...).map is not a function
function productList() {
40 | if(searchTerm) {
> 41 | return products.filter(product => product.name.includes(searchTerm).map(function(currentProduct, i) {
| ^ 42 | return <Product product={currentProduct} key={i} />;
43 | }));
44 | } else {
我怎样才能正确地实现这一点?我试图按照这个先前回答的问题作为指导。
productListPublic.js:
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { CardColumns, Card, Row, Col, ListGroup, Form } from "react-bootstrap";
import axios from "axios";
function ProductListPublic(props) {
const [isError, setIsError] = useState(false);
const [products, setProducts] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const Product = props => (
<Card>
<Row>
<Col md={{ span: 4 }}>
<Card.Title className="mt-4 text-center">
<Link to={`/products/list/${props.product._id}/`}>{props.product.name}</Link>
</Card.Title>
</Col>
<Col md={{ span: 8 }}>
<ListGroup>
<ListGroup.Item className="text-truncate">{props.product.description}</ListGroup.Item>
<ListGroup.Item>{props.product.stock} in stock</ListGroup.Item>
</ListGroup>
</Col>
</Row>
</Card>
)
useEffect(() => {
axios.get("http://localhost:4000/products/")
.then(res => {
setProducts(res.data);
}).catch(function(err) {
setIsError(true);
})
}, []);
function productList() {
if(searchTerm) {
return products.filter(product => product.name.includes(searchTerm).map(function(currentProduct, i) {
return <Product product={currentProduct} key={i} />;
}));
} else {
return products.map(function(currentProduct, i) {
return <Product product={currentProduct} key={i} />;
})
}
}
return (
<div className="text-center">
<Form>
<Form.Row>
<Form.Group as={Col}>
<Form.Label htmlFor="formSearch">Search Products</Form.Label>
<Form.Control
controlid="formSearch"
type="text"
value={searchTerm}
onChange={e => {
setSearchTerm(e.target.value);
}}
placeholder="Product Name"
/>
</Form.Group>
</Form.Row>
</Form>
<h2>Products List</h2>
<CardColumns>
{ productList() }
</CardColumns>
{ isError &&<p>Something went wrong with getting the products!</p> }
</div>
)
}
export default ProductListPublic;
解决方案
关闭filter
括号,然后map
在结果列表中使用。
return products.filter(product => product.name.includes(searchTerm)).map((currentProduct, i) => {
return <Product product={currentProduct} key={i} />;
});
推荐阅读
- node.js - 如何为 ExpressJS 路由保持 Nginx 上游?
- mysql - current_timestamp 错误对应于您的 MariaDB 服务器版本
- windows - Windows、Git 和裸存储库的 SSH url/路径
- selenium - 在无头和普通 chrome 之间弹出不同的 Google 登录
- powershell - Powershell脚本查看计算机是否设置为进入睡眠状态或显示器已关闭?
- angular - onSubmit 在 Angular 中触发两次
- keras - 添加用于从神经网络生成热图输出的注意力机制
- python - 应用 lambda 函数后,熊猫数据帧上的值不正确
- android - Kotlin 中的深拷贝领域对象
- angular - 空 FormGroup 的 setValue