如何在 React 和 javascript 中创建多个搜索？

Question

我在做作业时不知道如何进行多项搜索。我正在尝试很多事情。有知道的请回答。

app.jsx

  const [touristSpot, setTouristSpot] = useState([]);
  const [filterTourlistSpot, setFilterTourlistSpot] = useState([]);
  const [searchItem, setSearchItem] = useState("");

const filedConfig = {
    method: "get",
    url: "http://localhost:3000/fields",
  };
  const recordConfig = {
    method: "get",
    url: "http://localhost:3000/records",
  };

  useEffect(
    () =>
      axios(filedConfig)
        .then((res) => console.log(res?.data))
        .catch((err) => console.log(err)),
    []
  );

  useEffect(
    () =>
      axios(recordConfig)
        .then((res) => setTouristSpot(res?.data))
        .catch((err) => console.log(err)),
    []
  );
  console.log(searchItem);
  useEffect(() => {
    setFilterTourlistSpot(() =>
      // touristSpot?.filter((spot) => spot.관광지명.includes(searchItem)) //first try
      // touristSpot?.filter((spot) => new RegExp(searchItem).test(spot.관광지명))//second try
      touristSpot?.filter((spot) => spot.관광지명.match(searchItem))//final try
    );
  }, [searchItem, touristSpot]);

  return (
    <>
      <Header />
      <Search
        touristSpot={touristSpot}
        setTouristSpot={setTouristSpot}
        filterTouristSpot={filterTourlistSpot}
        setFilterTouristSpot={setFilterTourlistSpot}
        searchItem={searchItem}
        setSearchItem={setSearchItem}
      />
      <SpotList filterTourlistSpot={filterTourlistSpot} />
    </>
  );

spotlist.jsx

const Spotlist = ({ filterTourlistSpot }) => {
  return (
    <div className={styles.container}>
      {filterTourlistSpot.map((spot) => (
        <SearchSpot spot={spot} />
      ))}
    </div>
  );
};

searchspot.jsx

const Searchspot = ({ spot }) => {
  const onClick = (e) => {
    console.log(spot);
  };
  return (
    <div className={styles.spotbox} onClick={onClick}>
      <h3>{spot.관광지명}</h3>
    </div>
  );
};

我要的是当你输入多个关键词时，向你展示符合该关键词的搜索结果。在下面的情况下在一起。

Answer 1

你的细节有点不清楚，你应该提供你得到的错误，如果有的话，如果可能的话，翻译非英语的单词，因为它们似乎被用作变量and/or道具

如果您的错误发生在 spotlist.jsx 中的映射期间并且其他一切正常，请尝试以下操作：

spotlist.jsx

const Spotlist = ({ filterTourlistSpot }) => {
  return (
    <div className={styles.container}>
      {filterTourlistSpot().map((spot) => (
        <SearchSpot spot={spot} />
      ))}
    </div>
  );
};

您忘记调用 filterTourlistSpot 函数，然后再映射从该函数体内的过滤返回的数组。

如果这不能解决您的问题，请提供有关您的问题的更多信息，我将编辑我的答案以提供更好的解决方案。

如何在 React 和 javascript 中创建多个搜索？

How do you create multiple search in React and javascript?

javascript

search

reactjs