有没有一种方法可以通过useReducer和Context API将组件的状态访问到另一个组件？

问题描述

我在youtube视频中找到了此代码，该视频中App.js中的计数器是全局的，并且通过在按钮的click事件上传递一个函数来控制app.js中的计数器并由app组件中的按钮以及其他组件中的按钮控制动作

//code for Child component

import { CountContext } from "../App";

function ComponentA() {
    const countContext = useContext(CountContext);

    // const display = () => {
    //  // countContext.countState();
    //  console.log("comp a",countContext.countsstate("increment"));
    // };
    return (
        <div>
            Component A {countContext.countState}
            <button onClick={() => countContext.countdispatch("increment")}>
                Increment
            </button>
            <button onClick={() => countContext.countdispatch("decrement")}>
                Decrement
            </button>
            <button onClick={() => countContext.countdispatch("reset")}>Reset</button>
      
            <button onClick={display}>Acessing the app state</button> 
        </div>
    );
}

//code for App.js

export const CountContext = React.createContext();

function App() {
    const [count,dispatch] = useReducer(reducer,initialState);

    const incFunc = () => {
        dispatch("increment");
        console.log("dispatch",count);
        console.log("dispatched",dispatch);
    };

    return (
        <CountContext.Provider value={{ countState: count,countdispatch: dispatch }}>
            <div className="App">
                <CounterOne />
                <CounterTwo />
                <CounterThree />
                {count}
                <button onClick={incFunc}>Inc</button>
                <ComponentA />
                <ComponentB />
                <ComponentC />
                <DataFetchingOne />
                <DataFetchingTwo />
            </div>
        </CountContext.Provider>
    );
}

子组件中的注释显示功能是我在访问初始状态的代码中进行的编辑，我试图在名为“访问应用程序状态”的最后一个按钮中调用此功能，但未打印任何内容在控制台上，当我单击此按钮时。我想访问子组件中应用程序组件的inFunc 中正在更新的计数值。我不知道该怎么做。

解决方法

package com.amazonaws.lambda.userlayertest;

import com.amazonaws.services.lambda.runtime.Context;
import com.amazonaws.services.lambda.runtime.RequestHandler;

import customlayer.DataHandler;

public class LambdaFunctionHandler implements RequestHandler<RequestObject,String> {

@Override
public String handleRequest(RequestObject input,Context context) {
    
    System.out.println("call to layer");
    DataHandler dataHandler = new DataHandler();
    String data = dataHandler.getData(input.getBody());
    return data;
 }
}

console.log("comp a",countContext.countState); 不是函数。另外，您在控制台日志中有一个错字。

工作示例：https://codesandbox.io/s/peaceful-violet-01e3x

24小时后，我将删除此示例。