В настоящее время я изучаю React Context API и у меня есть проект со следующими файлами (я использую create-create-app для генерации проекта):
Tree
├── 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 / provider / 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 , чтобы выяснить, в чем дело, но я не увидел никакой подсказки.
Что я здесь не так сделал? Пожалуйста, укажите это мне. Если я пропустил вставку каких-либо важных файлов, пожалуйста, дайте мне знать. Спасибо.