Question

我正在通过本地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函数外部初始化的空数组，以及对调度函数的引用。

Answer 1

<ItemsContextProvider />未呈现。

确保正在被另一个jsx父元素消耗和呈现。

React useEffect Hook不触发具有[]依赖项的第一个渲染

1 个答案: