React 16.8 では、useReducer、useContext フックを使用してプロジェクトを実装し、Redux と同様のグローバル状態管理システムを作成しました。
ビューで、useEffect でデータをフェッチしようとすると、Maximum update depth エラーが発生します。
Facebook React - Hooks-FAQのすべての例を既に試しましたが、問題を解決できません。
私のpackage.jsonはそのようなものです:
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-chartjs-2": "^2.7.6",
"react-dom": "^16.8.6",
"react-router-config": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-test-renderer": "^16.8.6",
"react-uuid": "^1.0.2",
"reactstrap": "^7.1.0",
"simple-line-icons": "^2.4.1",
"styled-components": "^4.2.0"
これが私のコード例です：
ここにView.jsがあります
import React, { useEffect, useRef } from 'react'
import useView from '/store/hooks/useView'
import isEqual from '/services/isEqual'
import loading from '/service/loading'
const View = () => {
const viewContext = useView()
let viewContextRef = useRef(viewContext)
// Keep latest viewContext in a ref
useEffect(() => {
viewContextRef.current = viewContext
})
useEffect(() => {
// Fetch Data
async function fetchData() {
// This causes the loop
viewContextRef.current.startFetchProcess()
const url = 'http://example.com/fetch/data/'
try {
const config = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
}
}
const response = await fetch(url, config)
if (response.ok) {
const res = await response.json()
finalizeGetViewList(res)
// This causes the loop
viewContextRef.current.stopFetchProcess()
return res
}
} catch (error) {
console.log(error)
return error
}
}
// Prepare data for rows and update state
const finalizeGetViewList = (data) => {
const { Result } = data
if (Result !== null) {
let Arr = []
for (let i = 0; i < Result.length; i++) {
let Obj = {}
//...
//...
Arr.push(Obj)
}
// I compare the prevState with the fetch data to reduce
// the number of update state and re-render,
// so this section do not cause the problem
if (!isEqual(roleContextRef.current.state.rows, Arr)) {
viewContextRef.current.storeViewList(Arr)
}
} else {
console.log(errorMessage)
}
}
function doStartFetch () {
fetchData()
}
const startingFetch = setInterval(doStartFetch, 500)
// aborting request when cleaning
return () => {
clearInterval(startingFetch)
}
}, [])
const {
rows,
isLoading
} = viewContext.state
if (isLoading) {
return (loading())
} else {
return (
<div>
{rows.map(el => (
<tr key={el.id}>
<td>el.name</td>
<td>el.price</td>
<td>el.discount</td>
</tr>
))}
</div>
)
}
}
export default View
この問題を本当に解決したい場合は、保存サイクルの他のファイルを見てください。
useView.js のフックは次のとおりです。
import { useContext } from 'react'
import { StoreContext } from "../providers/Store"
export default function useUsers() {
const { state, actions, dispatch } = useContext(StoreContext)
const startFetchProcess = () => {
dispatch(actions.viewSystem.startFetchProcess({
isLoading: true
}))
}
const storeViewList = (arr) => {
dispatch(actions.viewSystem.storeViewList({
rows: arr
}))
}
const stopFetchProcess = () => {
dispatch(actions.viewSystem.stopFetchProcess({
isLoading: false
}))
}
return {
state: state.viewSystem,
startFetchProcess,
storeViewList,
stopFetchProcess,
}
}
ディスパッチする viewReducer.js は次のとおりです。
const types = {
START_LOADING: 'START_LOADING',
STORE_VIEW_LIST: 'STORE_VIEW_LIST',
STOP_LOADING: 'STOP_LOADING',
}
export const initialState = {
isLoading: false,
rows: [
{
ProfilePicture: 'Avatar',
id: 'id', Name: 'Name', Price: 'Price', Discount: 'Discount'
}
],
}
export const actions = {
storeViewList: (data) => ({ type: types.STORE_VIEW_LIST, value: data }),
startFetchProcess: (loading) => ({ type: types.START_LOADING, value: loading }),
stopFetchProcess: (stopLoading) => ({ type: types.STOP_LOADING, value: stopLoading })
}
export const reducer = (state, action) => {
switch (action.type) {
case types.START_LOADING:
const Loading = { ...state, ...action.value }
return Loading
case types.STORE_VIEW_LIST:
const List = { ...state, ...action.value }
return List
case types.STOP_LOADING:
const stopLoading = { ...state, ...action.value }
return stopLoading
default:
return state;
}
}
export const register = (globalState, globalActions) => {
globalState.viewSystem = initialState;
globalActions.viewSystem = actions;
}
これは、アプリ内のすべてのコンポーネントを提供し、状態を渡すための StoreProvider です。
import React, { useReducer } from "react"
import { reducer, initialState, actions } from '../reducers'
export const StoreContext = React.createContext()
export const StoreProvider = props => {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<StoreContext.Provider value={{ state, actions, dispatch }}>
{props.children}
</StoreContext.Provider>
)
}
これは、さまざまなビューの多くのレデューサーを複製するためのレデューサー index.js です。
import { user as userData, reducer as loginReducer } from './loginReducer'
import { register as viewRegister, reducer as viewReducer } from './viewReducer'
import { register as groupRegister, reducer as groupsReducer } from './groupsReducer'
export const initialState = {};
export const actions = {};
userData(initialState, actions)
viewRegister(initialState, actions)
groupRegister(initialState, actions)
export const reducer = (state, action) => {
return {
credentials: loginReducer(state.credentials, action),
roleSystem: viewReducer(state.viewSystem, action),
groups: groupsReducer(state.groups, action)
}
}
多くのファイルについて申し訳ありませんが、状況を説明する他の方法はありません。Redux を使用していた人は、このアプローチを理解できます。ページの最初のレンダリングでデータを取得しようとするまで、状態 => アクション => ディスパッチ システムに問題はありません (この例では、View と呼びます)。
古典的なlet didCancel = falseアプローチは機能しませんでした。状態を新しく取得したデータと比較すると、問題は解決しました。しかし、読み込みを追加すると、useReducer がトリガーされ、ページが再レンダリングされるため、無限ループが発生します。
UseRef と clearInterval はそれを妨げず、次のエラーが発生します。
Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.