Reactjs 如何从多个不同组件更新单个React组件？

我正在学习如何做出反应，并且仍在试图找出如何计划和实施一些事情。我有一个应用程序，可以进行三个不同的API调用，从而得到三个不同的返回值。我希望有一个全局状态组件，告诉我这三个是否都已加载。这是我的psuedo代码，因为我还没有找到正确的方法来做这件事，但这实际上是我目前的思路。我有一个主应用程序：

const App = () => {
    return (
      <div>
        <GenericAPICallerA />
        <GenericAPICallerB />
        <GenericAPICallerC />
        <div>
            <APIStatus/>
        </div>
      </div>      
    );
}

const-App=（）=>{
返回(
);
}

如果所有A、B和C API调用均已加载或未加载，则此APIStatus将返回：

class APIStatus extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            aLoaded: false,
            bLoaded: false,
            cLoaded: false,
            
        };
    }

    render(){
        if (this.state.aLoaded && this.state.bLoaded && this.state.cLoaded){
            return <div>Everything has loaded!</div>
        }
        else{
            return <div>Nothing has loaded!</div>
        }

        
    }

}

类APIStatus扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
阿洛德：错，
布劳德：错，
克罗德：错，
};
}
render（）{
if（this.state.aLoaded&&this.state.bLoaded&&this.state.cLoaded）{
返回已加载的所有内容！
}
否则{
返回未加载任何内容！
}
}
}

最后是一个APICaller组件。其他基本相同：

class GenericAPICallerA extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
        };
    }
    componentDidMount(){
        fetch("example.com/api",{
            method: 'GET',
        })
        .then(res => res.json())
        .then(
            (result) =>{
                this.setState({
                    isLoaded: true,
                });
            },
            (error) =>{
                this.setState({
                    isLoaded: false,
                    error
                });
            }
        )
    }
    render(){
        const { error, isLoaded, profile } = this.state;
        if (error){
            return <div>Errored!</div>
        } else if (!isLoaded){
            // APIStatus.state.aLoaded=false
        } else {
            // APIStatus.state.aLoaded=true
            return(
                <div>Generic Caller A is done!</div>
            );
        }
    }
}

类GenericalPicallera扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
};
}
componentDidMount（）{
获取（“example.com/api”{
方法：“GET”，
})
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
isLoaded：是的，
});
},
（错误）=>{
这是我的国家({
isLoaded:false，
错误
});
}
)
}
render（）{
const{error，isLoaded，profile}=this.state；
如果（错误）{
返回错误！
}否则，如果（！已加载）{
//APIStatus.state.aLoaded=false
}否则{
//APIStatus.state.aLoaded=true
返回(
通用调用程序A已完成！
);
}
}
}

渲染部分中的注释是我不知道如何做的。我觉得我应该将APIStatus作为道具传递给GenericalPicaller，但我仍然不确定如何从GenericalPicaller内部更新该属性

---

谢谢

您可以在父组件中创建一个函数，并将其传递给将被触发的子组件，并将状态变量传递给将使用它的子组件

例如：

import React from 'react'
import ComponentA from './ComponentA'
import ComponentB from './ComponentB'

class App extends React.Component
{
    constructor()
    {
       super()
       this.state = { my_state_variable:`some value` }
    }

    my_function()
    {
        this.setState({ my_state_variable:`new value` })
    }

    render = () => <>
        <ComponentA my_function={my_function} />
        <ComponentB my_state_variable={my_state_variable} />
    </>

}

export default App

从“React”导入React
从“./ComponentA”导入组件A
从“./ComponentB”导入组件B
类应用程序扩展了React.Component
{
构造函数（）
{
超级（）
this.state={my_state_变量：`some value`}
}
my_函数（）
{
this.setState（{my_state_变量：`new value`}）
}
渲染=（）=>
}
导出默认应用程序

成分a

import React from 'react'

const ComponentA = ({ my_function }) => <>
   <button onClick={() => my_function() }>Click Me </button>
</>

export default ComponentA

从“React”导入React
常量组件A=（{my_function}）=>
my_function（）}>单击我
导出默认组件a

成分B

import React from 'react'

const ComponentB = ({ my_state_variable }) => <>
   <p>{my_state_variable}</p>
   {my_state_variable === `some value` && <p>if some value this will render </p>}
   {my_state_variable === `new value` && <p>if new value this will render </p>}
</>

export default ComponentA

从“React”导入React
常量组件B=（{my_state_variable}）=>
{my_state_variable}

{my_state_variable==`some value`&&&p>如果这将呈现某个值
}
{my_state_variable==`new value`&&&p>如果出现新值，则会呈现
}
导出默认组件a

您可以使用

上下文来完成此操作。通过使用上下文，您可以访问您提供给它的值，只要您试图访问它的组件是
提供程序的子组件

下面的示例演示了如何访问不同级别的多个组件之间的共享状态，而无需传递道具


const{
useState，
使用效果，
createContext，
使用上下文，
碎片
}=反应；
const MainContext=createContext（{}）；
函数父（props）{
const[state，setState]=useState（{child1:false，child2:false，child3:false}）；
返回
{state.child1？'loaded'：'notloaded'}


; 
}
函数Child1（）{
const{state，setState}=useContext（MainContext）；
返回setState（{…state，child1:！state.child1}）}>Load Child 1；
}
函数Child2（）{
const{state，setState}=useContext（MainContext）；
返回
setState（{…state，child2:！state.child2}）}>加载子2{state.child2？'loaded'：'notloaded'}


{state.child3？'loaded'：'notloaded'}
;
}
函数Child3（）{
const{state，setState}=useContext（MainContext）；
返回setState（{…state，child3:！state.child3}）}>LoadChild3；
}
const el=document.querySelector（“根”）；
ReactDOM.render（，el）

您需要为API调用者和API状态提供共享父组件。状态将存储在该组件中，您可以将其传递到您的状态。我喜欢这样！我对它进行了一些小的调整。谢谢