我很想在這方面得到一些幫助，我想我已經到了那里，但我不確定，需要一些指導。
我有一個父組件，它呈現多個子組件，在每個子組件上，我從一個執行大量計算的鉤子和其他多個鉤子呼叫中得到一個結果。
這個鉤子只接受一個物體，而不是陣列，我無法修改所有內容以接受其中的陣列。
所以假設我的父組件是
const Parent = () => {
const cardsArray = [...]
return (
<Wrapper>
{cardsArray.map(
card => <CardComponent cardId={cardId} />
)}
</Wrapper>
)}
和我的子組件：
const CardComponent = ({cardId}) => {
const result = useCalculation(cardId)
return (
<div>My Calculation Result: {result}</div>
)}
現在我的問題是：我需要總結所有這些結果并將它們顯示在我的父組件中。實作這一目標的最佳方法是什么？
我想過在我的父級中有一個更新函式并將其作為道具傳遞給我的子組件，但是，我遇到的問題是，當 Card Subcomponent 從鉤子獲取結果時，呼叫該函式并更新父級狀態，盡管它作業，我在控制臺上收到一個錯誤，說我在渲染時正在執行狀態更新：
Parent在呈現不同的組件 ( ) 時無法更新組件 (CardComponent)。要在內部找到錯誤的 setState() 呼叫CardComponent，請按照https://github.com/facebook/react/issues/18178#issuecomment-595846312 中所述的堆疊跟蹤
我覺得答案一定不難，但我沒有看到
多謝
uj5u.com熱心網友回復：
我對您的實施做了一些假設，但我認為它會滿足您的需求。
您關于在父元素上使用更新器函式并將其傳遞給它的子元素的想法聽起來不錯，這就是我提出的解決方案的基本思想。
所以讓我們從Parent組件開始：
const Parent = () => {
const cardsArray = [
{ cardId: 1 },
{ cardId: 2 },
{ cardId: 3 },
{ cardId: 4 }
];
const [sum, setSum] = useState(0);
const addToSum = useCallback(
(result) => {
setSum((prev) => prev result);
},
[setSum]
);
return (
<div>
{cardsArray.map(({ cardId }) => (
<CardComponent key={cardId} cardId={cardId} addToSum={addToSum} />
))}
<strong>{sum}</strong>
</div>
);
};
我命名您的更新程式函式addToSum，假設它聚合和匯總子元素的結果。此功能有 2 個關鍵特性。
- 它是用一個
useCallback鉤子來記憶的，否則它將最終進入一個更新回圈，因為它會是每個渲染觸發子更新的新物件（函式）。 - 它使用回呼語法進行更新，以確保它始終使用最新的
sum.
那么您孩子的代碼CardComponent（以及 的幼稚實作useCalculation）將是：
const useCalculation = (id) => {
return { sum: id ** 10 };
};
const CardComponent = memo(({ cardId, addToSum }) => {
const result = useCalculation(cardId);
useEffect(() => {
addToSum(result.sum);
}, [result, addToSum]);
return <div>My Calculation Result: {JSON.stringify(result)}</div>;
});
這里的主要特征是：
- updater 函式僅在
result更改時才在效果上運行（效果依賴性）。 - 存在
addToSum依賴項以確保它始終運行正確的更新程式功能 - 它是一個記憶組件（使用
memo），因為它具有昂貴的計算，并且您只希望它在道具更改時更新。
我假設useCalculation回傳一個物件。如果它回傳一個原始值，那么事情可能會更簡單一些，但這段代碼應該適用于每種情況。
您可以在此代碼框中找到一個作業示例。
uj5u.com熱心網友回復：
我認為您應該使用共享狀態庫（如 Redux 或 React Context）來存盤所有這些計算并在您的父級中訪問它（如果需要，可以對它們求和）。
uj5u.com熱心網友回復：
在父級中創建一個狀態（sum在示例中），并從一個塊中的子級更新它useEffect，這發生在渲染完成后：
const { useEffect, useState } = React
const useCalculation = cardId => cardId * 3
const CardComponent = ({ cardId, update }) => {
const result = useCalculation(cardId)
useEffect(() => {
update(result)
}, [result])
return (
<div>My Calculation Result: {result}</div>
)
}
const Parent = ({ cardsArray }) => {
const [sum, setSum] = useState(0);
const updateSum = n => setSum(s => s n)
return (
<div>
{cardsArray.map(
cardId => <CardComponent key={cardId} cardId={cardId} update={updateSum} />
)}
sum: {sum}
</div>
)
}
ReactDOM.render(
<Parent cardsArray={[1, 2, 3]} />,
root
)<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419540.html
標籤：