Question

我有一个ReactJS网站，但我仍然是菜鸟。

我有2个组件

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

第一个组件的工作原理就像一个超级按钮，而第二个组件不会触发useEffect函数。

当用户单击/组件上的按钮时，会将其重定向到具有相应ID的/mostraMateria/:id。

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

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

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.js 如果位置为/mostraMaterie/:id并且不起作用，则处理页面呈现。

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} />{" "}会在调用fetchAnni之前呈现，甚至无法按照Artur的建议添加await prendiAnni和async fetchAnni。

我还从useEffect(fetchAnni, []);更改为useEffect(fetchAnni, [props.location.pathname]);，这是一个字符串

Answer 1

第二个useEffect arg []：

首先：发送[]作为useEffect的第二个参数将说“永不重新运行此功能”（安装和卸载时仅2次）。

将其删除！不是：

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

选择合适的变量进行跟踪：

您必须为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 2

好像您要传递一个空数组作为useEffect（）的第二个参数，CREATE STREAM events (aggregateId VARCHAR, aggregate VARCHAR, firstName VARCHAR, password VARCHAR, balance: VARCHAR, messagesCount INTEGER) WITH (KAFKA_TOPIC='events', VALUE_FORMAT='JSON'); CREATE STREAM users WITH (KAFKA_TOPIC='users') AS SELECT * FROM events WHERE aggregate = 'user';

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

如果您要运行效果并仅将其清理一次（在挂载和卸载），则可以传递一个空数组（[]）作为第二个参数。这个告诉React你的效果不依赖于道具的任何值或状态，因此它不需要重新运行。

如果要在每个渲染器上运行效果，则可以省略第二个参数。如果您希望它仅在某些属性/状态值更改时才运行，则可以在第二个参数中将其作为数组值传递。

Answer 3

在 useEffect 挂钩的依赖项数组中包含 URL。

示例：

import React, { useEffect } from 'react';

const Component = () => {
    
    const url = window.location.pathname.split('/').pop();

    useEffect(() => {
    
        // Function will retrigger on URL change

    }, [url]);

    return(
        <div className = 'Whatever'>Whatever</div>
    );

}

export default Component;

ReactJS：URL更改时未运行useEffect

3 个答案: