反应子组件导致父组件发生反应答案

【问题标题】：React child component causing a reaction in parent component反应子组件导致父组件发生反应
【发布时间】：2021-04-27 01:05:21
【问题描述】：

我绝对是一个 React 菜鸟，但我已经做了很多搜索，并且在这个基本原则上不断出现不足。我有一个通过 create-react-app 创建的 React 应用程序，结构如下：

-Parent Component
    -Child Component with some statistic values
    -Child Component (Form with Submit Button)

当用户与 Form 子组件交互时，他们可能会混合提交按钮，这会导致该组件中的代码进行 xhr 调用以与我的数据库交互。该交互的结果可能是另一个子组件中的统计数据发生变化。提交过程完成后，如何使 Stats 子组件重新获取其数据？

现在我在 stats 组件中有获取代码，在表单组件中有提交代码。将所有代码强加给父级的答案是什么？

我正在使用类组件，但如果这样更容易的话，我可以转换为函数式。

【问题讨论】：

将状态提升到父组件将是最简单和最直观的。如果许多不同的组件使用相同的数据，那么您可以使用 Context API 或 Redux
我看到的两个潜在问题。 1.提交代码现在在父级中，但需要访问表单子级中的用户输入； 2. form child 如何告诉 parent 它需要重新获取数据？
就像您将状态值传递给 stats 组件一样，您也可以将函数传递给表单组件。在这里你可以找到答案：stackoverflow.com/questions/41619166/…
您可以将一个函数（提交逻辑）作为道具传递给表单子组件，然后将表单状态从表单子组件传递给该函数。当状态改变时，React 会自动更新视图。
我假设提交按钮的测试也会向上移动到父组件？

标签： reactjs

【解决方案1】：

您可以将您的状态从子组件和提交到父组件的函数中移动。并将所有作为道具传递。然后从 props 中获取提交函数并在子组件中运行。

【讨论】：

【解决方案2】：

如果您的数据在两个子组件之间共享，则应将其移至父组件。

这样，您可以在调用 XHR 之后轻松地在父组件中设置新状态，并通过 prop 将该状态传递给 stats 组件。

【讨论】：

【解决方案3】：

我建议将组件始终保持为“尽可能愚蠢”，例如，表单只能是表单本身，它将调用父组件中的函数并在提交时发送数据以进行处理，获取数据的fetch函数也可以在父组件中。

我将使用我认为可以更快阐述的功能组件进行抽象：

export default const **ParentComponent**=()=>{
const [dataFetched,setDataFetched]=useState([])//you will store your data here

const fetchData=()=>{
Apicall to get the data and store it in data
setDataFetched(response)
}

const handleSubmit=(formValues)=>{
-API call here with the post of data(formValues in the format you need)
-after api call call function fetch to refetch the data in your other child component
fetchData()
}

return(


 <ChildWithForm
    handleSubmit={handleSubmit}/>



  <Child2withdata
data={dataFetched}
>

希望它能给你一些提示，如果我可以帮助，请不要犹豫

【讨论】：