ReactJS：url更改时不运行useEffect

Question

我有一个 ReactJS 网站，但我仍然是一个使用它的菜鸟。

我有 2 个组件

• 第一个是/页面，必须在向 Web 服务器发出请求后呈现，当用户到达该路线时，我为此使用了 useEffect。
• 第二个是/mostraMaterie/:id必须在向 Web 服务器发出另一个请求后呈现的。

第一个组件的工作方式就像一个魅力，而第二个组件不会触发 useEffect 函数。

当用户单击组件上的按钮时/，它会被重定向到/mostraMateria/:id相应的 id。

问题是/mostraMateria组件我有另一个 useEffect 函数，但它没有被触发。

正如评论中所建议的，这是 JSFiddlemostraMaterie.js 中的mostraMateria 文件

App.js 处理用户连接

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import MostraMaterie from "./Contenuti/MostraMaterie";
import "./App.css";

import Main from "./Contenuti/Main";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/mostraMateria/:id" component={MostraMaterie} />{" "}
        <Route exact path="/" component={Main} />{" "}
      </Switch>{" "}
    </Router>
  );
}

export default App;

如果位置正确并且工作正常， Main.js/会处理页面渲染。

import React, { useEffect, useState } from "react";
import {  Link } from "react-router-dom";
import Indirizzi from "./Indirizzi";
import Bottone from "../Util/Bottone";
import "../App.css";
import FullNavBar from "../NavBar/FullNavBar";

function Main() {
  const [indirizzi, cambiaIndirizzi] = useState([]);

  const fetchIndirizzi = () => {
    async function prendiIndirizzi() {
      let indirizzi = await fetch(
        "https://vps.lellovitiello.tk/Riassunty/API/indirizzi.php"
      );
      let ind = await indirizzi.json();

      for (let i = 0; i < ind.length; i++) {
        async function prendiMaterie() {
          let materie = await fetch(
            `https://vps.lellovitiello.tk/Riassunty/API/materie.php?indirizzo=${ind[i].Indirizzo}`
          );
          materie = await materie.json();

          for (let materia of materie) {
            Object.defineProperty(
              materia,
              "nome",
              Object.getOwnPropertyDescriptor(materia, "Materia")
            );
            delete materia["Materia"];

            Object.defineProperty(
              materia,
              "id",
              Object.getOwnPropertyDescriptor(materia, "IDMateria")
            );
            delete materia["IDMateria"];
            delete materia["Indirizzo"];
          }

          Object.defineProperty(
            ind[i],
            "nome",
            Object.getOwnPropertyDescriptor(ind[i], "Indirizzo")
          );
          delete ind[i]["Indirizzo"];
          Object.assign(ind[i], { dati: materie });
          Object.assign(ind[i], { id: i });
        }

        await prendiMaterie();
      }
      console.log("Main.js", ind);
      cambiaIndirizzi(ind);
    }
    prendiIndirizzi();
  };
  useEffect(fetchIndirizzi, []);

  return (
    <React.Fragment>
      <FullNavBar elementi={indirizzi} />{" "}
      <Link to="/Login">
        <Bottone TestoBottone="Per caricare un riassunto" />
      </Link>{" "}
      {indirizzi.map(indirizzo => {
        console.log(indirizzo);
        return <Indirizzi dati={indirizzo} />;
      })}
    </React.Fragment>
  );
}

export default Main;

/mostraMaterie/:id如果该位置有效或无效，MostraMaterie.js 会处理页面渲染。

import React, { useEffect, useState } from "react";
import "../App.css";
import history from "../Util/history";
import { Link } from "react-router-dom";
import FullNavBar from "../NavBar/FullNavBar";
import Indirizzi from "./Indirizzi";
import Bottone from "../Util/Bottone";

function MostraMaterie(props) {
  const [anni, cambiaAnni] = useState([]);

  // *** this function is never called ***
  const fetchAnni = () => {
    async function prendiAnni() {
      let anniJson = await fetch(
        "https://vps.lellovitiello.tk/Riassunty/API/ottieniAnni.php"
      );
      let idMateria = props.match.params.id;
      let ann = [];
      anniJson = await anniJson.json();

      for (let anno of anniJson) {
        async function prendiAnteprime() {
          let anteprimeFetch = await fetch(
            `https://vps.lellovitiello.tk/Riassunty/API/anteprima.php?idMateria=${idMateria}&anno=${anno}`
          );

          anteprimeFetch = await anteprimeFetch.json();
          for (let anteprima of anteprimeFetch) {
            Object.defineProperty(
              anteprima,
              "nome",
              Object.getOwnPropertyDescriptor(anteprima, "Titolo")
            );

            Object.defineProperty(
              anteprima,
              "id",
              Object.getOwnPropertyDescriptor(anteprima, "ID")
            );
            delete anteprima["Titolo"];
            delete anteprima["ID"];
          }

          let annoOggetto = {
            nome: anno + "",
            anteprime: anteprimeFetch
          };
          ann.push(annoOggetto);
        }

        await prendiAnteprime();
      }
      debugger;
      cambiaAnni(ann);
    }
    console.log("Vengo eseguito");
    prendiAnni();
  };

  useEffect(fetchAnni, []); 
  console.log(history.location);

  return (
    <React.Fragment>
      <FullNavBar indirizzi={anni} />{" "}
      <Link to="/Login">
        <Bottone TestoBottone="Per caricare un riassunto" />
      </Link>{" "}
      <h1> CIao CIAO CIAO CIAOC </h1>{" "}
      {
        //*** this depends on the response of the web server ***
         anni.map(anno => {
              console.log("Ciao");
              return <Indirizzi dati={anno} />;
            })}{" "}
    </React.Fragment>
  );
}

export default MostraMaterie;

我怎样才能做到这一点？

编辑

我已经删除了它<FullNavBar indirizzi={anni} />{" "}并且它可以工作，现在我的请求已发送到服务器并且“fetchAnni”函数被触发。

问题是，我需要删除的那段代码，似乎是 <FullNavBar indirizzi={anni} />{" "}在调用之前渲染的，即使 按照Artur 的fetchAnni建议添加await prendiAnniand也不起作用。async fetchAnni

我也从 改为useEffect(fetchAnni, []);that useEffect(fetchAnni, [props.location.pathname]);is a string

Answer 1

import React, { useEffect } from 'react' 
import { useHistory } from 'react-router-dom'

const Root = () => {
    const history = useHistory()
    useEffect(() => {
        history.listen((location) => {
            console.log(`You changed the page to: ${location.pathname}`)
        })
    }, [history])
}

Answer 2

第二个 useEffect arg []：

首先：发送一个[]useEffect 的第二个参数会说“永远不要重新运行这个函数”（只有两次，在安装和卸载时）。

删除它！这是不对的 ：

您不想删除它，否则每次渲染都会调用您的效果并导致性能问题。

选择要跟踪的正确变量：

您必须为 React 提供所有会影响函数重新渲染的字段，在您的情况下是“当 URL 更改时”。

提示： React 将每次测试自上次渲染以来其中一个变量是否已更新，但我们也知道非原始方法不起作用：

const a = {name: "Foo"};
const b = {name: "Foo"};
const res = (a === b); // False 

因此，您必须仅选择原始值。在您的情况下，最简单的是/:id您的路线：props.match.params.id。

  useEffect(fetchAnni, [props.match.params.id]); 
  console.log(`Render for ID: ${props.match.params.id}`);

异步/等待

另外，您的函数prendiAnni定义为async但您调用它：

console.log("Vengo eseguito");
prendiAnni();

代替

await prendiAnni();

Answer 3

看起来好像您正在传递一个空数组作为 useEffect() 的第二个参数，useEffect(fetchAnni, []);

\n\n

来自https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

\n\n

\n

如果您只想运行效果并仅清理一次（在安装和卸载时），则可以传递一个空数组 ([]) 作为第二个参数。这告诉 React 你的效果不依赖于 props 或 state 中的任何值，因此它永远不需要重新运行。

\n

\n\n

如果您想在每个渲染上运行该效果，则可以省略第二个参数。如果您希望它仅在某些 props/state 值更改时运行，您可以将它们作为第二个参数中的数组值传递。

\n