使用具有复杂的对象来设置提供商值钩当斜面更新上下文状态

Question

当我打电话toggleFilterSidebar应该切换filterSidebarIsOpen从虚假的状态设置为true，反之亦然，但没有任何的onClick发生，但是当我直接通过提供值作为一个对象它的工作原理。

为什么这项工作？

1).

return <FilterSidebarContext.Provider value={{
    toggleFilterSidebar,
    filterSidebarIsOpen,
    filters,
  }}>{children}</FilterSidebarContext.Provider>;

而这并不

2).

  const [value] = useState({
    toggleFilterSidebar,
    filterSidebarIsOpen,
    filters,
  });

  return <FilterSidebarContext.Provider value={value}>{children}</FilterSidebarContext.Provider>;

我的代码

FilterSidebar.context.js

import React, { useState } from 'react';

export const FilterSidebarContext = React.createContext({});

export const FilterSidebarProvider = ({ children }) => {
  const [filterSidebarIsOpen, setFilterSidebarIsOpen] = useState(true);
  const toggleFilterSidebar = () => setFilterSidebarIsOpen(!filterSidebarIsOpen);
  const [filters] = useState({ regions: [] });

  const [value] = useState({
    toggleFilterSidebar,
    filterSidebarIsOpen,
    filters,
  });

  return <FilterSidebarContext.Provider value={value}>{children}</FilterSidebarContext.Provider>;
};

export const FilterSidebarConsumer = FilterSidebarContext.Consumer;
export default FilterSidebarContext;

FilterButton.js

const FilterButton = ({ className, getTotalActiveFilters }) => {
  const { toggleFilterSidebar, filterSidebarIsOpen } = useContext(FilterSidebarContext);

  return <Button className={cx({ [active]: filterSidebarIsOpen })} onClick={toggleFilterSidebar} />;
};

Answer 1

有了这个代码：

  const [value] = useState({
    toggleFilterSidebar,
    filterSidebarIsOpen,
    filters,
  });

你提供useState与当部件首先安装仅使用的初始值。这不会是可能的value永远改变，因为你甚至没有创造一个变量的setter（例如const [value, setValue] = useState(...)）。

我假设你正在使用useState这里要尽量避免与每个创建新的对象渲染，从而迫使一切都依赖于即使它并没有改变的背景下重新绘制。相应的钩子，用于此目的是useMemo：

  const value = useMemo(()=>({
    toggleFilterSidebar,
    filterSidebarIsOpen,
    filters
  })[filterSidebarIsOpen]);

我只把filterSidebarIsOpen到依赖阵列，因为你当前的代码是三个可以改变（toggleFilterSidebar是一个国家制定者，这将不会改变的只有一个，filters目前还没有一个二传手因此它可以“T变化）。

Answer 2

useState需要一个函数来设置值useState开始做之后，因此，如果值代表的状态，setValue方法将代表的setState ...

const [value, setValue] = useState(initialValue);

然后使用setValue方法来改变它

onClick={() => setValue(newValue)}