Question

TestContext.js

 import { createContext } from 'react';

const CheckoutDrawerContext = createContext({
  showDrawer: false,
  toggleCheckoutDrawer: () => {},
});

export default CheckoutDrawerContext;

TestComponent.jsx

export default function TestComponent() {

  const checkoutDrawer = useContext(CheckoutDrawerContext);

  function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    };

  return (
    <div className="cart-drawer__summary">
     <div></div>
      <button type="button" className="order-button" onClick={placeOrder}>
      submit
      </button>
    </div>
  );
};

TestComponent1.jsx

export default function TestComponent1() {

  const checkoutDrawer = useContext(CheckoutDrawerContext);

  function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    };

  return (
    <div className="cart-drawer__summary">
     <div></div>
      <button type="button" className="order-button" onClick={placeOrder}>
      submit
      </button>
    </div>
  );
};

App.js

export default function App() {
  const [showDrawer, setShowDrawer] = useState(false);

  const toggleCheckoutDrawer = () => {
    setShowDrawer(!showDrawer);
  };
    return(
      <Router>
    
    <CheckoutDrawerContext.Provider value={{ showDrawer, toggleCheckoutDrawer }}>
        <Route path="/test" exact component={TestComponent}/>
        <Route path="/test1" exact component={TestComponent1}/>
    </CheckoutDrawerContext.Provider>
        
    </Router>
    );
  }

步骤：打开http：// localhost：3000 / 测试，点击提交按钮， console.log显示false，在其他标签中打开http：// localhost：3000 / test1 ，点击提交按钮， console.log显示为false（为什么仍然为false。更改了TestComponent中的值？）

然后按如下所示调用“ checkoutDrawer.toggleCheckoutDrawer（）”后添加console.log，

 function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    console.log(checkoutDrawer.showDrawer)
    };

现在console.log显示false false。（为什么checkoutDrawer.toggleCheckoutDrawer（）之后的console.log也显示false？）

UseContext不会更新所有组件

0 个答案: