自定义钩子和级联下拉菜单

问题描述

我是新手，我正在边做边学。现在我正在使用自定义 Hook 在组件之间共享逻辑。

这里是自定义 Hook 内部的逻辑

const useDropDownLogic = () => {
    const { menu } = useContext(MenuContext)
    const brand = [...new Set(menu.map(i => i.brand))]
    const [category,setCategory] = useState([])

    const brandChange = (e) => {
        const { type,textContent } = e.target
        setCategory([...new Set(menu.filter(i => i.[type] == textContent).map(i => i.category))])}

    return {
        brandChange,brand,category
    }
}
 
export default useDropDownLogic;

这是使用自定义 Hook 的第一个组件

const DropDownBrand = () => {
  const {brandChange,brand} = useDropDownLogic();
  const dropdownRef = useRef(null);
  const [isActive,setIsActive] = useDetectOutsideClick(dropdownRef,false);
  const onClick = () => setIsActive(!isActive)

  return (
    <div id="dropdownbrand">
      <div className="menu-container menu-brand">
        <label className = 'nav-label'>Select a Brand</label>
        <button onClick={onClick} className="menu-trigger brand-btn">
        <i className="fas fa-chevron-down fa-2x drop-arrow"></i>
        </button>
        <nav
          ref={dropdownRef}
          className={`drop-menu ${isActive ? "active" : "inactive"}`}
        >
          <ul>
          {brand.map((i) => (<li key={nanoid()} type = 'brand' value={i} onClick = {(e) => brandChange(e)}>{i}</li>))}
          </ul>
        </nav>
      </div>
    </div>
  );
};

导出默认的 DropDownBrand;

这里是第二个

    const DropDownCategory = () => {
  const { category } = useDropDownLogic()
  const dropdownRef = useRef(null);
  const [isActive,false);
  const onClick = () => setIsActive(!isActive)

console.log(category);
  return (
    <div id="dropcategory">
      <div className="menu-container menu-brand">
        <label className = 'nav-label'>Select a Brand</label>
        <button onClick={onClick} className="menu-trigger brand-btn">
        <i className="fas fa-chevron-down fa-2x drop-arrow"></i>
        </button>
        <nav
          ref={dropdownRef}
          className={`drop-menu ${isActive ? "active" : "inactive"}`}
        >
          <ul>
          {category.map((i) => (<li key={nanoid()} type = 'category'>{i}</li>))}
          </ul>
        </nav>
      </div>
    </div>
  );
};

export default DropDownCategory;

基本上我可以填充第一个下拉列表但不能填充第二个。我不明白为什么类别状态没有更新到 DropDownCategory 组件中

对我做错了什么有任何暗示吗？

非常感谢

解决方法

我明白了，

我正在改变方法。将状态移动到父组件并传递函数来处理点击事件。然后在 Parent 上，我将更新 dstate 并将其作为道具传递给孩子。 Nyhting 还没有分享，但它会来

,

钩子中没有持久化状态，它是一种共享逻辑和功能的方式。因为你正在定义

const [category,setCategory] = useState([])

在钩子内部，每次调用钩子时都会定义它。在您的情况下，dropdowncategory 和 dropdownbrand 都有自己的个人状态变量，称为类别。

要解决此问题，请在菜单上下文（或任何其他上下文）内定义 [category,setCategory] ​​并将值拉入您的钩子中。这样 useDropDownLogic() 的所有实例都与全局上下文值相关联。