Блог

У меня есть 3 пункта [«еда»,»напитки»,»одежда»] в качестве категории.На кнопке onclick я получаю значения, но я хочу, чтобы еда была выбранной вкладкой по умолчанию при первой загрузке страницы пользователем. я хочу, чтобы еда была такой, как useState(foodid).

 const Main = () =gt; {  const [showBlock, setShowBlock] = useState();  useEffect(() =gt; {  store.dispatch(getAllCategory());  store.dispatch(getAllProduct());  }, []);   const category = useSelector((state) =gt; state.category.data.categoryList);   return (  lt;div className="app-main"gt;  lt;Header /gt;  lt;main className={"main-page"}gt;  {category.map((cat, index) =gt; (  lt;button  key={cat._id}  type="button"  onClick={() =gt; setShowBlock(`${cat._id}`)}  className={`btn btn--rounded ${  showBlock === `${cat._id}` ? "btn--active" : ""  }`}  style={{ margin: "0.5rem" }}  gt;  {cat.name}  lt;/buttongt;  ))}   lt;Products show={showBlock === `${showBlock}`} id={showBlock} /gt;  lt;/maingt;  lt;/divgt;  ); };  

вы можете просто достичь этого, сделав это:

# создайте состояние для категории по умолчанию

 ... const [defaultCategory, setDefaultCategory] = useState(null); ...  

# добавить useEffect для прослушивания изменение категории

 ... const category = useSelector((state) =gt; state.category.data.categoryList);  useEffect(() =gt; {  setDefaultCategory(category[0]) }, [category]); ...  

# передайте категорию своему реквизиту/или сравните там, где это необходимо

 ... {defaultCategory  ? // render first tab (select first tab)  : null // anything until category load } ...