使用useReducer调度一个子组件中的操作并更新另一个子组件中的状态
食草动物
这是一个具有以下示例代码的CodeSandbox，而linter突出显示了一些问题：https ://codesandbox.io/s/react-repl-bw2h1
以下是我要执行的操作的基本示例。在一个容器组件，我有一个背景AppContext是，以子组件提供状态，<ChildConsumer />和<ChildDispatcher />。
该<ChildConsumer />组件使用接收这种状态下useContext，这似乎是按预期工作。
在内部<ChildDispatcher />，我试图在单击按钮时调度一个动作。为此，我创建了一个reducer处理动作的reducer 。我还在这里设置了useReducerreducer并接受了初始store状态。
当我单击按钮时，什么也没有发生。我期望发生的事情是，dispatch接收到的既是对象的state提取内容，又useReducer是action对象的内容，然后将其传递给减速器。减速器应看到BUTTON_CLICKED已收到类型的操作，并应返回包含旧状态以及其他'goodbye'项的新状态。然后，子组件<ChildConsumer />应使用此新状态重新呈现。
import React, { createContext, useContext, useReducer } from "react";
import ReactDOM from "react-dom";
const store = [""];
const AppContext = createContext(store);
const ChildDispatcher = () => {
const reducer = (state, action) => {
switch (action.type) {
case "BUTTON_CLICKED":
return [...state, "goodbye"];
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, store);
const handleClick = () =>
dispatch(state, {
type: "BUTTON_CLICKED"
});
return <button onClick={handleClick}>press me</button>;
};
const ChildConsumer = () => {
const [consumer] = useContext(AppContext);
return <div>{consumer}</div>;
};
const App = () => {
return (
<div>
<h1>Using Context and useReducer</h1>
<AppContext.Provider value={["hello"]}>
<ChildConsumer />
<ChildDispatcher />
</AppContext.Provider>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
索艾尔·阿什拉夫（Sohail Ashraf）
我在您的代码中做了一个小修改。
您必须像下面那样通过调度。调度需要一个类型为object的参数。
const handleClick = () => dispatch({ type: "BUTTON_CLICKED" });
然后可以像这样访问此状态。
const ChildDispatcher = () => {
const reducer = (state, action) => {
switch (action.type) {
case "BUTTON_CLICKED":
//action.state // like this
return [...state, "goodbye"];
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, store);
const handleClick = () =>
dispatch(state, {
type: "BUTTON_CLICKED"
});
return <button onClick={handleClick}>press me</button>;
};
默认情况下，react会将状态传递给调度程序。但是，如果要传递一些数据，则可以将其添加到对象中，然后将该对象传递给分派对象。
const handleClick = () => dispatch({ type: "BUTTON_CLICKED", state: state });
CodeSandBox：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何从子组件访问 Angular 4 中的另一个子组件
- 2
我想在react中访问另一个子组件中一个子组件的值
- 3
如何访问另一个子组件中插槽的内容
- 4
将点击事件从一个子组件传递到另一个子组件
- 5
如何知道另一个子组件中一个子组件的事件
- 6
如何将子组件路由到另一个子组件
- 7
如何基于事件使用React将一个子react / html组件替换为另一个子组件？
- 8
如何使用原子查询更新猫鼬中另一个子文档中的一个子文档？
- 9
如何使用原子查询更新猫鼬中另一个子文档中的一个子文档？
- 10
Vue.js：将数据从一个子组件传递到具有相同父组件的另一个子组件吗？
- 11
在MATLAB中的另一个子图中绘制一个子图
- 12
VBA EXCEL：如何在另一个子例程中调用一个子例程？
- 13
如何在VueJS中将值从一个子组件传递到另一个子组件？
- 14
如何在React中将数据值从一个子组件传递到另一个子组件？
- 15
如何从另一个子 JPanel (Java Swing) 中的输入触发一个子 JPanel 中的操作？
- 16
当另一个组件的子组件的状态在 react 中改变时触发事件
- 17
React Native ScrollView - 如何从另一个子组件按钮滚动到子组件？
- 18
如何将回调从一个子组件传递到另一个
- 19
如何使用Python处理从一个子文件夹到每个目录中另一个子文件夹的文件？
- 20
从另一个子执行子
- 21
如何从一个单独的子组件修改一个子组件的道具？
- 22
如何从Sitecore中的另一个子布局访问子布局控件？
- 23
从另一个子窗体访问子窗体中的控件
- 24
尝试让一个子视图使用ui-router调用另一个子视图
- 25
MongoDB-使用另一个子数组字段更新父数组字段
- 26
在同一工作表VBA中调用另一个子
- 27
如何从访问中另一个子窗体中打勾的组合框中过滤一个子窗体？
- 28
基于另一个子帧
- 29
从另一个子域访问Cookie
我来说两句