在使用 useContext 時面臨多重渲染問題，這里是代碼示例和列印顯示每次單擊時的多重日志我是使用背景關系的新手，我正在嘗試理解多重渲染的概念和原因，一種可能性是使用 useEffect 創建類似 'didMount' 或類似的東西，但我不知道把這段代碼放在哪里
編輯器頁面..
// react
import React, { useState, useEffect } from 'react';
// components
import Header from '../../components/header/Header';
import EditHands from './components/edit-hands/EditHands';
// context
import { EditorProvider } from '../../contexts/EditorContext';
const Editor = () => {
return (
<>
<Header />
<EditorProvider>
<p>Editor</p>
<EditHands />
</EditorProvider>
</>
);
};
export default Editor;
編輯器背景關系
import { createContext, useState } from 'react';
export const editorContext = createContext();
export const EditorProvider = ({ children }) => {
//
const [counter, setCounter] = useState(0);
const increaseCounter = () => setCounter(counter 1);
return (
<editorContext.Provider value={{ counter, increaseCounter }}>
{children}
</editorContext.Provider>
);
};
使用背景關系和多重渲染編輯手 => 組件
import React, { useContext } from 'react';
// database
import { hands } from '../../../../database/db';
// context
import { editorContext } from '../../../../contexts/EditorContext';
const EditHands = () => {
const { counter, increaseCounter } = useContext(editorContext);
console.log('Edit Hands counter value: ', counter);
return (
<>
<button>{counter}</button>
<button onClick={increaseCounter}>Increase</button>
<div className='hands-containner'>
{hands.map((hand, i) => (
<span key={i}>{hand}</span>
))}
</div>
</>
);
};
export default EditHands;
SS 來自 EditHands 內的 console.log
uj5u.com熱心網友回復：
React似乎Strict Mode呼叫了函陣列件兩次，所以你的代碼就可以了。
Strict Mode僅在開發模式下處于活動狀態以進行安全代碼撰寫。因此，當您在生產模式下運行它或關閉它時Strict Mode，問題就會消失。
在 React 17 中，console.log被 React 靜音。但是從版本 18 開始，React 不再抑制任何日志。檢查有關此的檔案和其他StackOverflow 問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503793.html