React项目如何设置food分类为页面首次加载时默认选中的tab

实现方案 #

你需要新增一个副作用监听分类列表的加载状态，拿到数据后自动匹配food分类的id作为初始选中值，修改点如下：

1. 新增useEffect依赖分类列表，加载完成后查找food分类并设置为默认选中
2. 修复Products组件show属性的逻辑错误（原逻辑永远返回true，不符合条件渲染预期）

完整修改后代码 #

const Main = () => {
  const [showBlock, setShowBlock] = useState();
  useEffect(() => {
    store.dispatch(getAllCategory());
    store.dispatch(getAllProduct());
  }, []);

  const category = useSelector((state) => state.category.data.categoryList);

  // 新增：初始化默认选中food分类
  useEffect(() => {
    // 仅分类列表加载完成、且未设置过选中项时执行
    if (category?.length && !showBlock) {
      const defaultCat = category.find(item => item.name === 'food') || category[0];
      setShowBlock(`${defaultCat._id}`);
    }
  }, [category, showBlock]);

  return (
    <div className="app-main">
      <Header />
      <main className={"main-page"}>
        {category.map((cat, index) => (
          <button
            key={cat._id}
            type="button"
            onClick={() => setShowBlock(`${cat._id}`)}
            className={`btn btn--rounded ${
              showBlock === `${cat._id}` ? "btn--active" : ""
            }`}
            style={{ margin: "0.5rem" }}
          >
            {cat.name}
          </button>
        ))}

        {/* 修复show属性逻辑，仅选中分类后展示产品 */}
        <Products show={!!showBlock} id={showBlock} />
      </main>
    </div>
  );
};

说明 #

• 代码里加了兜底逻辑，如果没找到name为food的分类，会默认选中第一个分类，避免报错
• 分类列表是异步从接口获取的，所以不能直接把food的id写死在useState的初始值里，通过监听category的变化来设置初始值更稳妥

内容的提问来源于stack exchange，提问作者Dev369