Masalah menapis data daripada set data berdasarkan input pengguna

Question

Berikut ialah gambaran keseluruhan tentang perkara yang telah saya cuba setakat ini:

1. Saya mempunyai elemen Input carian di mana pengguna boleh memasukkan pertanyaan carian mereka.
2. Saya menggunakan fungsi untuk mengendalikan proses penapisan apabila nilai searchInput berubah.
3. Fungsi penapis menggelung melalui set data dan membandingkan setiap item dengan nilai searchInput untuk menentukan sama ada ia patut ditunjukkan atau disembunyikan. Walau bagaimanapun, apabila saya menaip dalam searchInput, data kekal sama dan penapisan nampaknya tidak berkuat kuasa.

Fungsi data penapis

function filterData(searchText, restaurants) {
  const filterData = restaurants.filter((restaurant) =>
    restaurant.info.name.includes(searchText)
  );
  return filterData;
}

import { restruntList } from "../constants"; // JSON数据

const Body = () => {
  const [searchText, setSearchText] = useState("");
  const [restaurants, setRestaurants] = useState(restruntList);

  return (
    <>
      <div className="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="搜索"
          value={searchText}
          onChange={(e) => {
            setSearchText(e.target.value);
          }}
        />
        <button
          className="search-btn"
          onClick={() => {
            //过滤数据
            const data = filterData(searchText, restaurants);

            //更新状态 - restaurant变量
            setRestaurants(data);
          }}
        >
          搜索{" "}
        </button>
      </div>
      //UI
      <div className="restrunt-list">
        {restruntList.map((restaurant) => {
          return <RestruntCard {...restaurant.info} key={restaurant.info.id} />;
        })}
      </div>
    </>
  );
};

format data JSON restruntList

export const restruntList = [
  {
    info: {
      id: "23719",
      name: "麦当劳",
      cloudinaryImageId: "ee5f8e06b300efc07c9fe3f4df40dfc4",
      locality: "JM Road",
      areaName: "Shivajinagar",
      costForTwo: "₹400 for two",
      cuisines: ["汉堡", "饮料", "咖啡馆", "甜点"],
      avgRating: 4.3,
     }
  }
]

Answer 1

Berdasarkan kod dan perihalan yang anda berikan, pendekatan ini kebanyakannya kelihatan betul, tetapi terdapat masalah kecil dengan cara ia mengendalikan fungsi data penapis dan data restoran.

Isu utama ialah cara anda mengendalikan penapisan dan mengemas kini status. Memandangkan kemas kini keadaan React adalah tidak segerak dan tidak berlaku serta-merta selepas menggunakan searchText值来过滤restaurants可能无法得到预期的结果。状态更新可能在设置searchText secara langsung, anda mungkin mendapat hasil yang tidak konsisten atau lapuk yang ditapis.

Untuk menyelesaikan masalah ini, anda boleh memanfaatkan useEffect钩子在searchTextKemas kini data penapis apabila ia berubah. Dengan cara ini fungsi penapis akan sentiasa beroperasi pada keadaan terkini. Berikut ialah kod yang dikemas kini:

import React, { useState, useEffect } from 'react';
import { restruntList } from '../constants';

function filterData(searchText, restaurants) {
  const filteredData = restaurants.filter((restaurant) =>
    restaurant.info.name.toLowerCase().includes(searchText.toLowerCase())
  );
  return filteredData;
}

const Body = () => {
  const [searchText, setSearchText] = useState('');
  const [filteredRestaurants, setFilteredRestaurants] = useState(restruntList);

  useEffect(() => {
    const data = filterData(searchText, restruntList);
    setFilteredRestaurants(data);
  }, [searchText]);

  return (
    <>
      <div className="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="搜索"
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
        />
      </div>
      <div className="restaurant-list">
        {filteredRestaurants.map((restaurant) => (
          <RestruntCard {...restaurant.info} key={restaurant.info.id} />
        ))}
      </div>
    </>
  );
};

export default Body;

Perubahan dalam kod:

1. Kami menukar nama pembolehubah keadaan daripada restaurants更改为filteredRestaurants untuk mengelakkan kekeliruan antara data mentah dan data yang ditapis.
2. Kami menambah useEffect钩子来处理searchTextpenapis pada perubahan. Ini memastikan kemas kini yang betul bagi data yang ditapis.

Kini apabila anda menaip dalam kotak input carian, penapisan harus berkuat kuasa serta-merta dan senarai restoran harus dikemas kini dengan sewajarnya.