如何在 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

您的详细信息有点不清楚，您应该提供您遇到的错误（如果有的话），并尽可能提供非英文单词的翻译，因为它们似乎被用作变量和/或道具。

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

spotlist.jsx

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

在映射从该函数体内过滤返回的数组之前，您忘记调用您的 filterTourlistSpot 函数。

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