在這里，我通過中間組件通過道具傳遞狀態。中間組件有一個處理程式 (onIntermediatePropsHandler) 有一些邏輯 (const formatedAmount = enterAmount = 10;) 對正在傳遞的資料執行。看起來邏輯只執行一次。為什么是這樣？
const Parent = () => {
const onParentPropsHandler = amount => {
console.log(amount)
}
return (
<div>
<Intermediate IntermediateToParent={onParentPropsHandler} />
</div>
)
}
const Intermediate = (props) => {
const onIntermediatePropsHandler = enteredAmount => {
const formatedAmount = enteredAmount = 10;
props.IntermediateToParent(formatedAmount)
}
return (
<div>
<Child ChildToIntermediate={onIntermediatePropsHandler} />
</div>
)
}
export const Child = (props) => {
const [index, setIndex] = useState(null)
const onClickHandler = (index) => {
setIndex(index 1);
props.ChildToIntermediate(index);
}
return (
<div>
<button onClick={() => onResetState(index)}>Reset Counter</button>
</div>
)
}
這給出了控制臺日志
在此處輸入影像描述
uj5u.com熱心網友回復：
我不確定您要做什么。但是如果你想格式化更新的索引，你應該在函式中呼叫parentsuseEffect函式，因為索引是異步設定的，所以你得到的是舊的狀態。因此，您的子狀態將如下所示：
useEffect(() => {
props.ChildToIntermediate(index); // Updated index value
});
const onClickHandler = (index) => {
setIndex(index 1);
}
這樣，在更新索引后，您將根據更新的索引呼叫父函式（不再使用舊狀態）
uj5u.com熱心網友回復：
我不確定您要在這里實作什么。但是如果你想在子本地狀態設定索引之前格式化索引，那么你應該在設定索引之前呼叫父函式，如下所示：
const Intermediate = (props) => {
const onIntermediatePropsHandler = (enteredAmount) => {
const formatedAmount = (enteredAmount = 10);
props.IntermediateToParent(formatedAmount);
return formatedAmount // Return the formated Amount to the children
};
return (
<div>
<Child ChildToIntermediate={onIntermediatePropsHandler} />
</div>
);
};
export const Child = (props) => {
const [index, setIndex] = useState(null);
const onClickHandler = (index) => {
const updatedIndex = props.ChildToIntermediate(index); // You get the updated index
setIndex(updatedIndex 1);
};
return (
<div>
<button onClick={() => onClickHandler(index)}> Counter: {index}</button>
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/409200.html
標籤：