如何在react js中从父组件的孙子组件调用另一个子组件的API

Question

我需要从主(父)组件的另一个子组件的孙子组件调用子组件中的API。这是我的组件的结构。

function MainComponent(){
return(
<div>
<Child1Component />
<Child2Component />
</div>
)
}
function Child1Component(){
return(
<div>
<ModalComponent />

</div>
)
}
function ModalComponent(){
const upadate = () => {
//call API in Child2Component
}
return(
<div>         
</div>
)
}
function Child2Component(){
const fetch = () => {
axios.get(ULR + '/api/mymethod').then(respose =>{
})
}
return(
<div>           
</div>
)
}

如果在<ModalComponent/>中有一个更新是<Child1Component/>的子节点，那么在<Child2Component/>中应该执行一个API调用，以便Child2Component可以得到更新，我的意思是它的状态应该在API调用后得到更新。

请大家帮帮我。

Answer 1

我将创建一个新组件作为child1和child2的父组件。然后将API调用和相关状态移动到新的父组件。这叫做向上提升状态

Answer 2

您有三个选择:

1. 在父进程中使用共享上下文，然后分别将state和set state函数传递给子进程和孙子进程。(我认为在您的特定场景中是最佳解决方案)
使用回来的
3. 创建一个父状态，然后直接传递给子状态(然而，因为你有孩子和孙子，它可以变得混乱真的很快，所以我不建议你)

实现如下:

//Maincomponent.js
import React, {useState} from 'react';
export const SharedContext= React.createContext(undefined!)
function MainComponent(){
const [myState, setMyState] = useState() //Initialize with anything you want
return(
<SharedContext.Provider value={{myState, setMyState}}>
<div>
<Child1Component />
<Child2Component />
</div>
<SharedContext.Provider/>
)
}

现在让我们更新状态:

import {useContext} from 'react';
import {SharedContext} from '../my/file/path';
function Child2Component(){
const { myState, setMyState } = useContext(SharedContext);
const fetch = () => {
axios.get(ULR + '/api/mymethod').then(respose =>{
//Update parent state through context
setMyState(...) //insert your data
})
}
return(
<div>           
</div>
)
}

最后，让我们设置一个useEffect钩子来监听父状态的变化:

import {useEffect, useContext} from 'react';
import {SharedContext} from '../my/file/path';
function ModalComponent(){
const { myState, setMyState } = useContext(SharedContext);
useEffect(()=>{
//Update here. This will be called every time you update parent state
}
,[myState])
return(
<div>           
</div>
)
}