当用户没有从 React 的下拉列表中按类别过滤时，如何默认显示所有项目

Question

第一次尝试，所以请原谅我。有关完整代码，请参阅此处的codesandbox。

我有一个下拉菜单，根据类别过滤产品。当前处于负载状态，项目不显示产品。只有当你选择一个类别时，产品才会加载进来。

我想在下拉菜单中显示项目加载上的所有产品，其中包含"所有"选项。然后，当用户选择一个类别时，过滤产品。

在下面写了一些代码。当添加if(!selectedCategory)…语句，则抛出"TypeError: filteredCategories错误。Map不是一个函数。如果我删除If语句，项目将加载，我可以按类别进行筛选，但它不会显示项目加载中的所有产品。

代码:

// Load in global state
const { data, isLoading } = useAPI();
const [selectedCategory, setSelectedCategory] = useState("");
// DROPDOWN - filter based on category
const filteredCategories = () => {
if (!selectedCategory) { // <--- trying to return all products by default if user doesn't select a category
return data;
}
return data.filter(
(machine) =>
machine.category.toLowerCase() === selectedCategory.toLowerCase()
);
};

渲染代码:

{/* Dropdown */}
<div className="options">
{!isLoading ? (
<>
<select
value={selectedCategory}
onChange={(e) =>
setSelectedCategory(e.target.value)}
className="product-dropdown"
name="product-dropdown"
>
{data.map((item) => (
<option value={item.category}>{item.category}</option>
))}
</select>
</>
) : (
<p>Loading...</p>
)}
</div>
</div>

是否有一种方法可以在所有产品中默认加载下拉菜单中的' all '选项，然后当用户从下拉菜单中选择时按类别过滤产品?

Answer 1

您可以使用defaultValue

<select
value={selectedCategory}
onChange={(e) =>
setSelectedCategory(e.target.value)}
className="product-dropdown"
name="product-dropdown"
defaultValue=""
>
<option value="">All</option>
{data.map((item) => (
<option value={item.category}>{item.category}</option>
))}
</select>