如何解决React:在上下文提供程序被使用之前在它内部运行异步操作
我正在运行一个 React 前端应用程序,并且我正在使用 JSON Server 来模拟后端。我还尝试使用 Context 来模拟前端应用程序可以调用的端点。
我从上下文提供程序组件内的 useEffect 钩子调用 JSON Server 端点,该组件还使用 reducer 来管理随上下文导出的方法。
在我的代码中发生的事情是,当 ViewComponent 调用上下文的 get() 方法时,reducer 首先返回其结果(此时是一个空数组),然后 DbProvider 的 useEffect 钩子加载数据来自模拟服务器。
我尝试用 HOC 包装 ViewComponent,该 HOC 应该仅在设置上下文值时才呈现,但我从未让它呈现它的内部组件。
这是一个非常牵强的例子,但是我想知道是否有办法在组件可以使用它之前运行 DbProvider 的 useEffect 钩子,因为我已经知道它是必需的从我在 App 组件中将它作为提供者传递的那一刻起。
--DbContext.js
const DbContext = createContext({
data: [],get: () => {},});
function dbReducer(state,action) {
switch (action.type){
case "GET":
return { ...state,data: action.payload,}
default: return state;
}
}
function DbProvider(props) {
const [state,dispatch] = useReducer(dbReducer,{data: []});
const [db,setDb] = useState([]);
useEffect(() => {
axios({ method: "get",url: "http://localhost:3001/db",responseType: "json",})
.then((res) => setDb(res.data));
},[]);
function get() {
dispatch({ type: "GET",payload: db,});
}
return (
<DbContext.Provider value={{ data: state.data,get }}
{...props}
/>
);
}
export { DbContext,DbProvider };
--App.js--
import { DbProvider } from "./DbContext";
export default function App() {
return (
<DbProvider>
...
</DbProvider>
);
}
--ViewComponent.js--
import { DbContext } from './DbContext';
export default function ViewComponent() {
const { get } = useContext(DbContext);
const people = useRef([]);
useEffect(() => {
people.current = get();
},[])
return ( ... )
}
--ViewWithContext.js--
import { DbContext } from './DbContext';
import ViewComponent from './ViewComponent';
export default function FeedWithContext(props) {
return (
<DbContext.Consumer>
{dbContext => dbContext.value && <ViewComponent {...props}/>}
</DbContext.Consumer>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。