如何解决React useEffect Hook不触发具有[]依赖项的第一个渲染
我正在通过本地API通过Axios GET请求获取数据,并试图将数据保存在上下文对象中。
当我在Context Provider函数之外运行GET请求时,它可以正常工作。但是,当我将它放入不依赖任何功能的UseEffect函数中时,即。 useEffect( () => /* do something*/,[] )
useEffect挂钩永远不会触发。
代码在这里:
import React,{ createContext,useReducer,useEffect } from 'react';
import rootReducer from "./reducers";
import axios from 'axios';
import { GET_ITEMS } from "./reducers/actions/types";
export const ItemsContext = createContext();
function ItemsContextProvider(props) {
const [items,dispatch] = useReducer(rootReducer,[]);
console.log('this logs');
useEffect(() => {
console.log('this does not');
axios.get('http://localhost:27015/api/items')
.then(data => dispatch({type: GET_ITEMS,payload: data}))
},[])
return (
<ItemsContext.Provider value={{items,dispatch}}>
{ props.children }
</ItemsContext.Provider>
);
}
export default ItemsContextProvider;
我从没在控制台中看到“这不行” (已选中两次和三次)。我首先尝试将上下文初始化为空值,在第一次渲染时发出GET请求,然后更新上下文值。
对于在我做错事情方面的任何帮助,我将非常感谢。
编辑-呈现上下文提供程序的位置
import React from 'react';
import AppNavbar from "./Components/AppNavbar";
import ShoppingList from "./Components/ShoppingList";
import ItemModal from "./Components/ItemModal";
//IMPORTED HERE (I've checked the import directory is correct)
import ItemsContextProvider from "./ItemsContext";
import { Container } from "reactstrap"
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';
function App() {
return (
<div className="App">
<ItemsContextProvider> //RENDERED HERE
<AppNavbar />
<Container>
<ItemModal />
<ShoppingList /> //CONSUMED HERE
</Container>
</ItemsContextProvider>
</div>
);
}
export default App;
我正在另一个具有以下代码段的文件中使用它:
const {items,dispatch} = useContext(ItemsContext);
console.log(items,dispatch);
我看到控制台日志,其中显示了我在Context Provider中的useEffect函数外部初始化的空数组,以及对调度函数的引用。
解决方法
<ItemsContextProvider />
未呈现。
确保正在被另一个jsx父元素消耗和呈现。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。