Javascript '；错误：重新渲染过多'；关于simple React Redux应用程序

我正在尝试使用React Redux构建一个简单的应用程序，它从state获取一个引用并将其呈现到页面上。现在，我将应用程序的主要功能放在一个名为

QuoteBox

的功能组件中，我将其呈现在另一个名为

app

的功能组件中，然后将其包装在React-Redux

提供者中，最后呈现到页面中：

/src/features/QuoteBox/QuoteBox.jsx

从“React”导入React
从“react-redux”导入{useSelector，useDispatch}
进口{
初始化，
getNewQuote，
选择报价
}来自“./quoteBoxSlice”
从“./QuoteBox.module.css”导入样式
导出函数QuoteBox（）{
const currentQuote=useSelector（selectQuote）
const dispatch=usedpatch（）
返回(
{currentQuote['quote']}
{currentQuote['author']}
新报价！
);
}

/src/features/QuoteBox/quoteBoxSlice.js

从'@reduxjs/toolkit'导入{createSlice}
函数随机指数（n）{
返回Math.floor（Math.random（）*n）；
}
export const slice=createSlice({
名称：“quotebox”，
初始状态：{
所有报价：[]，
当前报价：{}
},
减速器：{
初始化：状态=>{
状态['allQuotes']=[
{作者：'作者一'，引用：'引用一'}，
{作者：'作者二'，引用：'引用二'}，
{作者：'作者三'，引述：'引述三'}，
{作者：'作者四'，引用：'引用四'}，
{作者：'作者五'，引用：'引用五'}
]
状态['currentQuote']=状态['allQuotes'][
随机索引（状态['allQuotes'].length）
]
},
getNewQuote:state=>{
状态['currentQuote']=状态['allQuotes'][
随机索引（状态['allQuotes'].length）
]
}
}
})
导出常量{initialize，getNewQuote}=slice.actions
导出函数selectQuote（状态）{
返回状态['quoteBox']['currentQuote']；
}
导出默认的slice.reducer

/src/app/store.js

从'@reduxjs/toolkit'导入{configureStore}
从“../features/QuoteBox/quoteBoxSlice”导入quoteBoxReducer
导出默认配置存储({
减速器：{
quoteBox:quoteBox减速器
}
})

/src/App.jsx

从“React”导入React
从“./features/QuoteBox/QuoteBox”导入{QuoteBox}
函数App（）{
返回(
);
}
导出默认应用程序

/src/index.js

从“React”导入React
从“react dom”导入react dom
导入“./index.css”
从“./App”导入应用程序
从“./app/store”导入存储
从“react redux”导入{Provider}
ReactDOM.render(
,
document.getElementById（'root'））
)

错误页面给了我以下反馈：

**18 stack frames were expanded.**
**renderWithHooks**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:14815
**updateFunctionComponent**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:17034
**beginWork**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:18610
**callCallback**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:188
**invokeGuardedCallbackDev**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:237
**invokeGuardedCallback**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:292
**beginWork$1**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:23203
**performUnitOfWork**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:22157
**workLoopSync**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:22130
**performSyncWorkOnRoot**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:21756
**flushSyncCallbackQueueImpl/<**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:11089
**unstable_runWithPriority**
C:/Users/jpaul/Desktop/quote-box/node_modules/scheduler/cjs/scheduler.development.js:653
**runWithPriority$1**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:11039
**flushSyncCallbackQueueImpl**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:11084
**flushSyncCallbackQueue**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:11072
**unbatchedUpdates**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:21909
**legacyRenderSubtreeIntoContainer**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:24757
**render**
C:/Users/jpaul/Desktop/quote-box/node_modules/react-dom/cjs/react-dom.development.js:24840

**扩展了18个堆栈帧**
**带挂钩的渲染器**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:14815
**updateFunctionComponent**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:17034
**开始工作**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:18610
**回调**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:188
**invokeGuardedCallbackDev**
C:/Users/jpaul/Desktop/quote-box/node\u modules/react-dom/cjs/react-dom.development.js:237
**invokeGuardedCallback**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:292
**开始工作1美元**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:23203
**执行工作**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:22157
**workLoopSync**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:22130
**performSyncWorkOnRoot**
C:/Users/jpaul/Desktop/quote box/node_modules/react-dom/cjs/react-dom.development.js:21756
**flushSyncCallbackQueueImpl/在
QuoteBox
中，渲染时调用调度，而不是单击。这会更改报价，导致重新读取
QuoteBox
，从而导致另一个无限期的调度。更改此项：

onClick={dispatch（getNewQuote（））}

为此：

onClick={（）=>dispatch（getNewQuote（））}