（React Context 初学者）使用 react-router-dom 更改页面时 React Context 不启动

Question

我正在努力提高我的状态管理技能，所以我选择使用 REACT CONTEXT。我正在使用 axios 从我的后端服务器获取项目数据并将其存储在上下文中。

当我处于 /home 时，一切正常：状态更新，然后组件重新呈现，一切看起来都正常。但是当我移动到 /shop 并且我 console.log(items) 它 returns 我是一个空数组而不是我之前得到的数据。

这是我的文件：

APP.JS

import logo from './logo.svg';
import './App.css';
import Nav from './components/navigations/NavBAr/Nav';
import HeaderSlides from './components/slides/header/HeaderSlide';
import Home from './components/Home/Home';
import Footer from './components/footer/Footer';
import { Route, Switch } from 'react-router-dom';
import Login from './components/Logs/Login/Login';
import { useState } from 'react';
import { ItemProvider } from './context/ItemContext';
import Register from './components/Logs/Register/Register';
import { UserProvider } from './context/UserContext';
import Shop from './components/Shop/Shop';



function App() {

  return (
    <ItemProvider>
      <UserProvider>
    <div className="App">
      <header>
        <Nav/>
      </header>
      <Route render={({ location }) => (
            <Switch location={location}>
              <Route exact path='/' render={ () => (<Home/>)}/>
              <Route path='/login' component={Login}/>
              <Route path='/register' component={Register}/>
              <Route path='/shop' component={Shop}/>
            </Switch>
      )} />
      <footer>
        <Footer/>
      </footer>
    </div>
    </UserProvider>
    </ItemProvider>
  );
}

export default App;

ItemContext

import axios from 'axios';
import React, { useState, createContext, useEffect } from 'react';

export const ItemContext = createContext();

export function ItemProvider(props) {
    const [items, setItems] = useState([]);


    return (
        <ItemContext.Provider value={[items, setItems]}>
            {props.children}
        </ItemContext.Provider>
    );
}

**Item.js ** 调用 Home.js 上下文工作

import React, { useContext, useEffect } from 'react';

//styles
import './Items.css'

//items
import { ItemContext } from '../../../../context/ItemContext'

export default function Items({ toShow }) {

    const [items, setItems] = useContext(ItemContext);
    const data = items
    let stuff;
    if (data.length === 0) {
        console.log("loading");
    } else {
        console.log(data);
        stuff = data.map((details, i) => {
            const { name, brand, gender, price, image, categorie } = details;
            while (gender === toShow) {
                return (
                    <div id="itemCard1">
                        <div className="itemImgWrap">
                            <img src={image} alt="first image" />
                        </div>
                        <div className="details">
                            <p className="detailsName">{name}</p>
                            <p className="brand">{brand} </p>
                            <p className="gender">{gender}</p>
                            <p className="price">{price}€</p>
                        </div>
                    </div>
                )
            }
        })
    }
    return (
        <div className="productItem">
            {stuff}
        </div>
    )

}

Views.js 在 Shop.js 上下文中调用不起作用

import React, { useContext, useEffect, useState } from 'react';


import './Views.css'

//items
import { ItemContext } from '../../../context/ItemContext'

export default function Views() {
    const [items, setItems] =  useContext(ItemContext);
    console.log(items);
    const data = items
    let stuff;
    if (data.length === 0) {
        console.log("nothing");
    } else {
        console.log(data);
        stuff = data.map((details, i) => {
            const { name, brand, gender, price, image, categorie } = details;
           
                return (
                    <div id="itemCard1">
                        <div className="itemImgWrap">
                            <img src={image} alt="first image" />
                        </div>
                        <div className="details">
                            <p className="detailsName">{name}</p>
                            <p className="brand">{brand} </p>
                            <p className="gender">{gender}</p>
                            <p className="price">{price}€</p>
                        </div>
                    </div>
                )
        })
    }

    return (
        <div className="viewsContainer">
            <div className="viewsGrid">
                {stuff}
            </div>
        </div>
    )
}

Answer 1

所以我用react-router-dom <Link/>.

解决了

鉴于我想在页面初始化后执行路由，我按 url 在页面之间导航，因此上下文总是被清除并且应用程序刷新不是我们想要的。所以我使用了 <Link/> 然后它起作用了，因为 <Link/> 可以帮助你在不刷新的情况下导航我猜......

（React Context 初学者）使用 react-router-dom 更改页面时 React Context 不启动

(React Context Beginner) React Context doesn't stat when changing page using react-rooter-dom

javascript

state-management

reactjs

axios

react-context