React：如何停止重新渲染组件或对同一路由更改路由器进行 API 调用

Question

我需要帮助来停止在路由更改时再次进行相同的 API 调用。我试图在网络和 stackoverflow 上找到可用的解决方案，但我无法弄清楚修复此问题需要进行哪些更改。

我还尝试使用 sessionStorage 来存储一个标志，如果 API 调用被触发，那么标志设置为 true，并且在路由器更改时，我检查标志是否为 true，然后不要进行任何 API 调用。但随后它会清空文章列表。

我有一个带有路由的主要 App 组件，其中包含两个组件：（请参见下面给出的代码）

1. 文章首页
2. 书签首页

我面临的问题是，当我第一次点击http://localhost:3001 时，它会重定向到http://localhost:3001/articles 页面并正确呈现ArticleHome 组件并获取文章列表。然后我单击书签链接，它会呈现http://localhost:3001/bookmarks 路由和相关组件，并进行 API 调用以呈现书签列表。

但是当我使用路由器 http://localhost:3001/articles 返回文章页面时，由于每次路由更改时组件重新呈现，它再次触发 API 调用以获取文章。

谁能指导我如何在路由器更改和组件重新渲染时停止再次执行 API 调用？

如果数据已经加载，是否有更好的方法来处理同一组件的路由器更改时的 API 调用？

class App extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    render() {
        return (
            <Router>
                <React.Fragment>
                    <Switch>
                        <Route exact path="/" render={() => <Redirect to="/articles" />} />
                        <Route path="/articles" render={() => <ArticleHome type="articles" />} />
                        <Route path="/bookmarks" render={() => <BookmarkHome type="bookmarks" />} />
                        <Route path="*" component={NoMatch} />
                    </Switch>
                </React.Fragment>
            </Router>
        );
    }
}

export default App;

在 ArticleHome 组件中，我有一个 API 调用，用于获取文章列表并在 BookmarkHome 组件我有另一个 API 调用来获取书签列表。

ArticleHome 组件：（BookmarkHome 组件的功能相同）

import React, { useReducer, useEffect, useState } from "react";

const ArticleHome = (props: any) => {

    const [state, setState] = useState({
        articles: [],
        reRender: true
    });

    const [newState, dispatch] = useReducer(articleReducer, state);

    useEffect(() => {


        // componentWillUnmount
        return () => {

            console.log('unmounting 1...');
            setState({
                ...state,
                reRender: false
            });
        }

    },[state.reRender]); // componentDidUpdate

    const fetchAllrecords = () => {
        fetch(url)
        .then((data: any) => {

            dispatch({ type: 'GET_ALL_RECORDS', data: data.docs })

            return data.docs;
        })
    }

return (
    <ul>
        <li>Render article list here</li>
    </ul>
)
}


// Reducer function
// ========================

function articleReducer(state: any, action: any) {
    switch (action.type) {
        case "GET_ALL_RECORDS":
            return {
                ...state,
                articles: action.data,
                reRender: false
            }
        }
        default:
            return state;
    }
}

但是当我使用路由器切换到上述任何组件时，它会再次执行 API 调用。

我在useEffect 钩子中传递了[state.reRender]，告诉react 只有在添加任何新项目或数据更新时才重新渲染组件。

在articleReducer 函数中我正在设置reRender: false。

如果您需要这方面的更多信息，请告诉我。

谢谢， 吉涅什·拉瓦尔

Answer 1

如果我是你，我会从路由组件之外的我的 api 中获取，然后将其传递给路由。然后，您不必担心路由更改和任何涉及操纵路由器默认行为的编程。您可以通过以下两种方式之一执行此操作。

第一 在组件树中执行更高的 api 调用。因此，如果您要在应用程序组件中进行 api 调用，然后将其传递给 Route，您就不必担心路由的渲染。您的逻辑将超出其范围。

第二 如果您不想要一个凌乱的应用程序组件，您可以创建一个上下文组件并在那里执行您的逻辑。然后只需将您的组件包装在您创建的上下文组件中。像这样：

这是一个代码框Sandbox

您的应用组件

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";

import First from "./First";
import Second from "./Second";
import Context from "./Context";
import "./styles.css";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h1>Router Rerendering Fix</h1>
        <ul>
          <li>
            <Link to="/">First Route</Link>
          </li>
          <li>
            <Link to="/second">Second Route</Link>
          </li>
        </ul>
        <Switch>
          <Context>
            <Route exact path="/" component={First} />
            <Route path="/second" component={Second} />
          </Context>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您的文章组件

import React, { useContext } from "react";
import {ApiContext} from "./Context";

const First = () => {
  const context = useContext(ApiContext);
  return (
    <div>
      <div>First Route</div>
      <ul>
        {context.map((article, index) => (
          <li key={index}>{article}</li>
        ))}
      </ul>
    </div>
  );
};

export default First;

你的上下文组件

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

export const ApiContext = React.createContext();

const Context = props => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    console.log('rendered');
    setArticles(['Article One', 'Article Two', '...ect'])
  }, []);

  return (
    <ApiContext.Provider value={articles}>
      {props.children}
    </ApiContext.Provider>
  )
}

export default Context;