javascript - 如何正确更新 React Context 状态并避免重新渲染？

问题描述

我目前正在学习 React Context API，并且我有一个包含以下文件的项目（我正在使用create-create-app生成项目）：

树

├── package.json
├── node_modules
│   └── ...
├── public
│   └── ...
├── src
│   ├── components
│   │   ├── App.js
│   │   ├── Container.js
│   │   ├── Info.js
│   │   ├── PageHeading.js
│   │   ├── common
│   │   │   ├── Footer.js
│   │   │   ├── Header.js
│   │   │   ├── Helpers.js
│   │   │   ├── Loading.css
│   │   │   ├── Loading.js
│   │   │   └── SearchForm.js
│   │   └── list
│   │       ├── Pagination.js
│   │       └── Table.js
│   ├── css
│   │   └── ...
│   ├── fonts
│   │   └── ...
│   ├── images
│   │   └── ...
│   ├── index.css
│   ├── index.js
│   └── providers
│       └── GlobalProvider.js
└── yarn.lock

文件：src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import Header from "./components/common/Header";
import Footer from "./components/common/Footer";

ReactDOM.render(
    [<Header key='1' />, <App key='2' />, <Footer key='3' />],
    document.getElementById("root")
);

文件：src/providers/GlobalProvider.js

import React, { Component } from "react";
import { handleResponse } from "../components/common/Helpers";

// Set up initial context
export const GlobalContext = React.createContext({});

// Create an exportable consumer that can be injected into components
export const GlobalConsumer = GlobalContext.Consumer;

// Create the provider using a traditional React.Component class
class GlobalProvider extends Component {
    state = {
        age: 100,
        error: null,
        isLoading: false,
        currentPage: 1,
        result: "",
        data: null,
        total_hg_customers: "",
        total_grams_by_customers: "",
        totalPages: "",
        hasNextPage: false,
        hasPrevPage: false
    };

    fetchCustomersByPage = () => {
        this.setState({ isLoading: true });
        const { currentPage } = this.state;

        fetch(
            `https://api-server.com/customer_gold?pageNum=${currentPage}`
        )
            .then(handleResponse)
            .then(response => {
                const {
                    currentPage,
                    result,
                    data,
                    total_hg_customers,
                    total_grams_by_customers,
                    totalPages,
                    hasNextPage,
                    hasPrevPage
                } = response;

                this.setState({
                    isLoading: false,
                    currentPage,
                    result,
                    data,
                    total_hg_customers,
                    total_grams_by_customers,
                    totalPages,
                    hasNextPage,
                    hasPrevPage
                });
                console.log("API request done and state has been updated"); // <-- this one get infinitely generated
            })
            .catch(error => {
                this.setState({
                    error: error.errorMessage,
                    loading: false
                });
            });
    };

    render() {
        return (
            // value prop is where we define what values
            // that are accessible to consumer components
            <GlobalContext.Provider
                value={{
                    state: this.state,
                    fetchCustomersByPage: this.fetchCustomersByPage
                }}>
                {this.props.children}
            </GlobalContext.Provider>
        );
    }
}

export default GlobalProvider;

文件：src/components/common/Helpers.js

export const handleResponse = response => {
        return response.json().then(json => {
            return response.ok ? json : Promise.reject(json);
        });
    };

文件：src/components/App.js

import React, { Component } from "react";
import GlobalProvider from "../providers/GlobalProvider";
import PageHeading from "./PageHeading";
import Container from "./Container";

class App extends Component {
    render() {
        return (
            <GlobalProvider>
                <div className='root-container content'>
                    <PageHeading />
                    <Container />
                </div>
            </GlobalProvider>
        );
    }
}

export default App;

文件：src/components/Container.js

import React, { Component } from "react";
import Loading from "./common/Loading";
import Info from "./Info";
import SearchForm from "./common/SearchForm";
import Table from "./list/Table";
import Pagination from "./list/Pagination";
import { GlobalConsumer } from "../providers/GlobalProvider";

class Container extends Component {
    render() {
        return (
            <GlobalConsumer>
                {context => {
                    const { isLoading } = context.state;

                    if (isLoading) {
                        return (
                            <div className='loading-container'>
                                <Loading />
                            </div>
                        );
                    }

                    return (
                        <div className='middle-container'>
                            <div className='container'>
                                <div className='success-container'>
                                    <div className='row'>
                                        <Info />
                                        <SearchForm />
                                    </div>
                                    <div className='row'>
                                        <Table />
                                    </div>
                                    <div className='row pagination'>
                                        <Pagination />
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                }}
            </GlobalConsumer>
        );
    }
}

export default Container;

文件：src/components/list/Table.js

import React, { Component } from "react";
import { GlobalConsumer, GlobalContext } from "../../providers/GlobalProvider";

class Table extends Component {
    static contextType = GlobalContext;

    componentDidMount() {
        console.log("Hello");
        return this.context.fetchCustomersByPage();
    }

    render() {
        return (
            <div className='col-12'>
                <GlobalConsumer>
                    {context => {
                        const { data } = context.state;
                        return (
                            <table className='customer-list'>
                                <thead>
                                    <tr>
                                        <th width='50%'>Account Number</th>
                                        <th width='50%'>Gold Balance (g)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {data &&
                                        data.map(customer => (
                                            <tr key={customer.account_number}>
                                                <td>{customer.account_number}</td>
                                                <td>{customer.gold_balance}</td>
                                            </tr>
                                        ))}
                                </tbody>
                            </table>
                        );
                    }}
                </GlobalConsumer>
            </div>
        );
    }
}

export default Table;

现在的问题是它继续对 API 服务器进行 API 调用（一个又一个的无限调用）。当我删除this.setState({isLoading: false, currentPage, ...})部分时，它停止了对 API 服务器的无限调用。但当然，应用程序的isLoading状态停留在true并且加载微调器组件仍然存在于视图中。

我只需要向 API 服务器提交一个调用 → 将响应分配给提供者/全局状态 → 移除加载微调器 → 使用来自 API 调用的数据呈现表格视图。我尝试使用Why-did-you-update包来找出问题所在，但我没有看到任何线索。

我在这里做错了什么？请向我指出。如果我错过了在这里粘贴任何重要文件，请告诉我。谢谢你。

标签： javascriptreactjsecmascript-6react-context

javascript - 如何正确更新 React Context 状态并避免重新渲染？

问题描述

解决方案

推荐阅读