Reactjs 反应子组件导致父组件中发生反应

我当然是一个反应迟钝的人，但我已经做了大量的搜索，并且一直在这个基本原则上做得不够。我通过create React app创建了一个React app，其结构如下：

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

当用户与表单子组件交互时，他们可能会破坏submit按钮，这会导致该组件中的代码进行xhr调用以与my db交互。该交互的结果可能是另一个子组件中的stats发生变化。当提交过程完成时，如何使Stats子组件重新提取其数据

现在，我在stats组件中有获取代码，在表单组件中有提交代码。将所有这些代码都交给家长的答案是什么

---

我使用的是类组件，但如果这样做更简单的话，可以切换到函数。您可以将状态从子组件和函数移动到父组件，以便提交到父组件。把所有的东西都当作道具传递。然后从props获取提交函数并在子组件中运行。

如果数据在两个子组件之间共享，则应将其移动到父组件

---

这样，在调用

XHR

后，您可以轻松地在父组件中设置新状态，并通过道具将该状态传递给stats组件。

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

我将对功能组件进行抽象，我认为这些组件可以更快地进行阐述：

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}
>

导出默认常量**ParentComponent**=（）=>{
const[dataFetched，setDataFetched]=useState（[]）//您将在此处存储数据
常量fetchData=（）=>{
Apicall获取数据并将其存储在数据中
setDataFetched（响应）
}
const handleSubmit=（formValues）=>{
-API调用这里的post数据（formValues为您需要的格式）
-api调用函数fetch后，重新提取另一个子组件中的数据
fetchData（）
}
返回(

---

希望它能给你一些提示，如果我能提供帮助，请毫不犹豫地询问

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