将ReactJs中的搜索词更改为小写

我正在为产品创建搜索功能，但我有一个问题，我的产品名称是以第一个字母为大写，例如，我有产品名称

Lemon

，如果我搜索

Lemon

，它会说

产品不存在

。如何

将其更改为可按大写或小写搜索

这是产品列表页面

const ProductList = ({
  products,
  searchTerm,
  loading,
  fetchProductRequest,
}) => {

  useEffect(() => {
    fetchProductRequest();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const [sortAndFilter, setSortAndFilter] = useState([]);

  useEffect(() => {
    let results = [...products];

    results = results.filter(product => {
      return product.name.includes(searchTerm)
        || searchTerm.includes(product.name)
        || searchTerm.includes(product.price);
    });

  if (loading) {
    return (
      <Container>
        <Row>
          <Col>
            <Loading />
          </Col>
        </Row>
      </Container>
    );
  }

  return (
    <Container>
      <Row>
        {!!sortAndFilter && sortAndFilter.length > 0 ? (
          sortAndFilter.map((product, index) => {
            return (
              <ProductItem
                key={index}
                image={product.image}
                name={product.name}
                price={parseInt(product.price)}
              />
            );
          })
        ) :
          (
            <h4 className="center-title">Product list is empty!</h4>
          )}
      </Row>
    </Container>
  );
};

const ProductList=({
产品，
搜索术语，
加载，
获取产品请求，
}) => {
useffect（（）=>{
fetchProductRequest（）；
//eslint禁用下一行react HOOK/deps
}, []);
const[sortAndFilter，setSortAndFilter]=useState（[]）；
useffect（（）=>{
让结果=[…产品]；
结果=结果.过滤器（产品=>{
退货产品.名称.包括（searchTerm）
||searchTerm.includes（产品名称）
||搜索术语。包括（产品。价格）；
});
如果（装载）{
返回(
);
}
返回(
{！！sortAndFilter&&sortAndFilter.length>0(
sortAndFilter.map（（产品、索引）=>{
返回(
);
})
) :
(
产品列表为空！
)}
);
};

---

我的结构是这样的

看，你的搜索代码应该是正确的，我唯一能猜到的是你应该在匹配之前将搜索词转换成小写/大写

e、 g:

或

toUpperCase

等

存储在数据库中的值也是如此

因为

input.toLowercase（）==stored.toLowercase（）

---

这永远不会有大小写问题

前端没有任何事情可做。问题是后端的搜索API正在按区分大小写或不区分大小写进行搜索。逻辑应该从后端处理。
您描述的当前行为是，后端按大小写进行搜索，因此，如果要按不区分大小写进行搜索，则需要更改后端（搜索API）。
如果您是从前端搜索，则可以使用正则表达式匹配不区分大小写

const searchReg = new RegExp('[' + searchTerm + ']', 'gi')//the 'i' modifier for insensitive case. 'g': to find all the matches.
results = results.filter(product => 
  return searchReg.test(product.name) || searchReg.test(product.price));

---

我还不清楚你的答案，你能告诉我更多细节吗？也许在这里应用我上面的代码，让我更了解我在前端搜索的时刻，而不是在后端搜索的时刻，那么在比较之前，我可以将

searchTerm

和

prod.name

中的代码更改为小写。像这样

结果吗=results.filter（product=>{const searchInput=searchTerm.toLowerCase（）

我看到了它，但它对我不起作用，在我输入搜索值后，它不会在UI中显示产品之前，然后所有产品都会显示，而不仅仅是我在搜索表单中输入的一个产品，我的意思是，首先，我的产品会在UI中显示所有产品列表，但之后，当我输入搜索词时，它只会显示具有该名称的产品ave搜索无论在何种情况下，它仍然显示产品。

const searchReg = new RegExp('[' + searchTerm + ']', 'gi')//the 'i' modifier for insensitive case. 'g': to find all the matches.
results = results.filter(product => 
  return searchReg.test(product.name) || searchReg.test(product.price));