ReactJS - 将数据作为我刚刚从子组件中提取的道具传递

Question

所以我刚刚使用saveSavingGoalHandler从一个孩子提取一些数据组件& lt;SavingsGoal/在…我有它保存在SaveGoalData，当我运行Console.log()我得到正确的字符串。

问题是我现在需要把它传递给另一个组件

我的第一个想法是让SaveGoalData = "外部组件则有SaveGoalData = SavingsGoalID在函数中，但我只是得到未定义的，因为它会在空字符串被填充之前运行它。

有什么想法?

const saveSavingGoalHandler = (SavingsGoalID) => {
let SaveGoalData = SavingsGoalID;
console.log(SaveGoalData);
};
return (
<div className="App">
<GetAccountName />
<TransactionFeed
accountUID={AccountID}
defCategory={DefCategory}
savingGoalId={SaveGoalData} <--- Is Undefined
/>
<SavingsGoal
accountUID={AccountID}
defCategory={DefCategory}
onSaveSavingGoal={saveSavingGoalHandler}
/>
</div>
);

Answer 1

const Parent = () => {
const [saveGoalData, setSaveGoalData] = useState()
const saveSavingGoalHandler = (SavingsGoalID) => {
setSaveGoalData(SavingsGoalID)
};
return (
<div className="App">
<GetAccountName />
<TransactionFeed
accountUID={AccountID}
defCategory={DefCategory}
savingGoalId={saveGoalData}
/>
<SavingsGoal
accountUID={AccountID}
defCategory={DefCategory}
onSaveSavingGoal={saveSavingGoalHandler}
/>
</div>
);

Answer 2

您是正确的，您应该在saveSavingGoalHandler之外使用let SaveGoalData，因为该let仅在saveSavingGoalHandler的范围内可用。

我建议在saveSavingGoalHandler中使用setState({ SaveGoalData: SavingsGoalData })，并从TransactionFeed道具的状态中读取SaveGoalData。

旁注:考虑到React中的数据流应该是单向的，这似乎是反模式的。