reactjs - 有没有办法我可以通过 useReducer 和 Context API 访问组件的状态到另一个组件?
问题描述
我在 youtube 视频中找到了这段代码,其中 App.js 中的计数器是全局的,并且由应用程序组件中的按钮以及其他组件中的按钮控制,方法是在按钮的单击事件上传递一个函数来调度一个动作
//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>
);
}
子组件中的注释显示功能是我在代码中编辑以访问初始状态,我试图在最后一个名为“访问应用程序状态”的按钮中调用它,但是当我单击此按钮时,控制台上没有打印任何内容。我想访问子组件中 App 组件的 inFunc 中正在更新的计数值。我不知道该怎么做。
解决方案
console.log("comp a", countContext.countState);
countState
不是函数。此外,您在控制台日志语句中有错字。
工作示例:https ://codesandbox.io/s/peaceful-violet-01e3x
我将在 24 小时后删除此示例。
推荐阅读
- symfony - Symfony 测试无法访问存储库
- python - 生成具有配对约束的所有子集
- vba - excel vba抑制“下载文件”消息
- ssl - log4j2-config.xml 中的 Log4j2 TCP-SSL Appender 配置
- regex - 如何在 x 和 y 中正则表达式搜索 a,并且仅在 x 中找到 a 时才包括替换 y?
- python - 尝试通过 pip 安装 mysql-connector 时出现 Python 错误
- laravel - 验证年龄变量 - Laravel RegisterController
- java - java - 如何定义一个接收两个类型为T的参数的方法,以及在java中扩展T的S?
- reporting-services - Report Builder 3.0 中的 LENGTH 等效项
- linux - perf.data 到文本或 csv