Javascript 在react中创建搜索栏

当用户想要搜索产品时，我正在尝试创建一个搜索栏

这是我的搜索输入：

const [searchTerm, setSearchTerm] = useState("");

const onSubmit = (e) => {
  e.preventDefault();
  navigate(`/search/${searchTerm}`);
  setIsShowing(false);
  setOpacity(1);
};

<SearchTitle>What are you looking for?</SearchTitle>
<FormSearch onSubmit={onSubmit}>
  <SearchInput type="text" 
               placeholder="Type something to search" 
               onChange={(e)=> setSearchTerm(e.target.value)} 
               defaultValue={searchTerm} />
  <SearchButton type="submit" value="Search" />
</FormSearch>

---

我从mongoose创建了项目，每个项目都有一个标题

beout

。

从控制台日志中，道具是整个对象，您需要的是道具。因此，将

信息包装器

组件更改为：

<InfoWrapper>
  {props.title === "beuter" ? <h1> Hello World </h1> : <h1>Null</h1>}
</InfoWrapper>

{props.title===“beuter”？你好世界：空}

它仍然返回空值，但如果我像这样尝试，它将显示

Hello World

，然后出现其他错误。props=“beuter”是错误的，这不是比较，它将值“beuter”赋给props，并且始终为真。您可以尝试

props.match.params.title

而不是

props.title

获取此错误

TypeError:无法读取未定义的属性“params”

它将是

props[“title”]

因为它的末尾有一个空格…您为什么要将属性命名为“title”，并在末尾有一个空格？我的意思是，这很好，它应该仍然有效，但它很奇怪。

import React, { useEffect, useState } from "react";
import styled from "styled-components";
const SearchInfo = (props) => {
  const [response, setResponse] = useState({});
  useEffect(() => {
    console.log(props);
  }, [props]);

  const InfoWrapper = styled.div`
    text-align: center;
  `;

  return (
    <div>
      <InfoWrapper>
        {props === "beuter" ? <h1> Hello World </h1> : <h1>Null</h1>}
      </InfoWrapper>
    </div>
  );
};

export default SearchInfo;

{path: "/search/:title ", "title ": "beuter", uri: "/search/beuter",
 location: {…}, setSearchTerm: ƒ, …} children: undefined location:
 {pathname: "/search/beuter", search: "", hash: "", href:
 "http://localhost:3000/search/beuter", origin:
 "http://localhost:3000", …} navigate: ƒ navigate(to, options) path:
 "/search/:title " setSearchTerm: ƒ () "title ": "beuter" uri:
 "/search/beuter"
 __proto__: Object

<InfoWrapper>
  {props.title === "beuter" ? <h1> Hello World </h1> : <h1>Null</h1>}
</InfoWrapper>