加载器同时使用关键字过滤数据

Question

I want to show a loader when I search properties with the filter method. When somebody searches it should show a loading spinner when the filter is complete it should show the data.. I'm not filtering data with API calls. I have used react hooks for a loading state and it is true by default. If anyone can help me how can I use the setState hook inside a function to change the state, if I use setState in the function it will re-render again and again which is not allowed.if anyone of you can help please help

 export const applyFilters = (properties, query) => { return ( properties && properties.filter((property, i) => { let matches = true; if (query) { const keys = ["title"]; let containsQuery = false; keys.forEach(key => { if (property[key].toLowerCase().includes(query.toLowerCase())) { containsQuery = true; } }); if (;containsQuery) { matches = false; } } return matches; }) ); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Your filtering is a synchronous operation so it should be almost instantaneous. I would not show a spinner at all.

Generally I recommend that the filter itself should be a state. That would be your query variable. But the filtered data should just be a variable derived from the states (or props) of query and properties .

export const FilterProperties = () => {
  const [query, setQuery] = useState("");
  // some state that gets set somehow, or maybe properties is a prop
  const [properties, setProperties] = useState([]);

  const filteredProperties = applyFilters(properties, query);

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>
        {filteredProperties.map((property) => (
          <li key={property.id}>{property.title}</li>
        ))}
      </ul>
    </div>
  );
};

If you are concerned about performance then you can use useMemo to re-compute the filteredProperties variable only when query or properties changes.

const filteredProperties = useMemo(
  () => applyFilters(properties, query), 
  [properties, query]
);

---

The filter function itself can be cleaned up quite a bit. We can use default arguments instead of checking that properties and query exist. We can use an empty array for properties to return no matches and an empty string for query which matches everything.

If you always just want to search the title then this keys array is pointless:

const applyFilters = (properties = [], query = "") =>
    properties.filter((property) =>
        property.title.toLowerCase().includes(query.toLowerCase())
    );

But we can make keys an argument to allow more customization. We make use of the Array.prototype.some() method to see if any of the keys are a match.

const applyFilters = (properties = [], query = "", keys = ["title"]) =>
    properties.filter((property) =>
        // true if any key contains the query
        keys.some((key) =>
            property[key].toLowerCase().includes(query.toLowerCase())
        )
    );