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

【问题标题】：ReactJS - Passing data as props that I've just extracted from Child ComponentReactJS - 将数据作为我刚刚从子组件中提取的道具传递
【发布时间】：2022-07-06 04:06:54
【问题描述】：

所以我刚刚使用 saveSavingGoalHandler 从孩子那里提取了一些数据组件 .. 我将它保存在 SaveGoalData 中，当我运行 Console.log() 时，我得到了正确的字符串。

问题是我现在需要将它传递给另一个组件。当我做 saveGoalId={SaveGoalData} 我得到“SaveGoalData”未定义..

我的第一个想法是让我们让 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>
  );

【问题讨论】：

代码太少，不知道哪里出了问题。我看不到你在哪里声明SaveGoalData。您在函数中声明它，但它之外的声明在哪里？
我们看不到你的初始状态，你也不是setting状态。所以我不会对 SaveGoalData 未定义感到惊讶。

标签： javascript reactjs components parent-child react-props

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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>
  );

【讨论】：