如何在上下文中存儲 function 調用

Question

我想做的是用 state 和更新 state 的 function 初始化我的上下文。

例如，假設我有以下內容：

export default function MyComponent () {

    const MyContext = React.createContext()
    const [myState, setMyState] = useState('1')

    const contextValue = {
        currentValue: myState,
        setCurrentValue: (newValue) => setMyState(newValue)
    }

    return (
        <MyContext.Provider value={contextValue}>
            <MyContext.Consumer>
                {e => <div onClick={() => e.setCurrentValue('2')}> Click me to change the value </div>}
                {e.currentValue}
            </MyContext.Consumer>
        </MyContext.Provider>
    )
}

{e.currentValue} 首先正確輸出“1”，但是當我單擊按鈕時，沒有任何變化。

我期望的是 e.setCurrentValue('2') 會調用 setMyState('2')，它會更新 state 鈎子。 這將改變 myState 的值，改變 currentValue 的值，並顯示“2”。

我究竟做錯了什么？

Answer 1

您可能希望從上下文中返回一個片段作為一個 JSX 根。

在這里檢查 - https://playcode.io/931263/

import React, { createContext, useState } from "react";

export function App(props) {
  const MyContext = React.createContext();
  const [myState, setMyState] = useState("1");

  const contextValue = {
    currentValue: myState,
    setCurrentValue: newValue => setMyState(newValue)
  };

  return (
    <MyContext.Provider value={contextValue}>
      <MyContext.Consumer>
        {e => (
          <>
            <div onClick={() => e.setCurrentValue("2")}>
              Click me to change the value
            </div>
            {e.currentValue}
          </>
        )}
      </MyContext.Consumer>
    </MyContext.Provider>
  );
}

Answer 2

您在沒有e的MyContext.Consumer上下文之外使用e.currentValue ，因此它拋出了一個錯誤，即e不是從e.currentValue定義的。

您可以將它們包裝在一起<MyContext.Consumer>{e => {}}</MyContext.Consumer>

 function MyComponent() { const MyContext = React.createContext(); const [myState, setMyState] = React.useState("1"); const contextValue = { currentValue: myState, setCurrentValue: (newValue) => setMyState(newValue), }; return ( <MyContext.Provider value={contextValue}> <MyContext.Consumer> {(e) => ( <div> <div onClick={() => e.setCurrentValue("2")}> Click me to change the value </div> <div>{e.currentValue}</div> </div> )} </MyContext.Consumer> </MyContext.Provider> ); } ReactDOM.render(<MyComponent />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>