Javascript 反应上下文：组件消费和显示信息

我正在构建一个应用程序，它包含两个相同级别的组件，而不是一个父组件和另一个子组件。我需要从一个组件到另一个组件共享信息（状态）。所以，我第一次使用React上下文

我有一个列出位置的组件，我将其作为提供者：

const PlacesList=({places})=>{
     const [selectedPlace, setSelectedPlace] = useState({});

     const renderedList = places.map(/*Business logic*/)
     
     return (
         <div>
            <div className="ui list">{renderedList}</div>
            <SelectedPlaceContext.Provider value={selectedPlace}>
                <CityDetail />
            </SelectedPlaceContext.Provider>
         </div
      )
}

constplaceslist=（{places}）=>{
const[selectedPlace，setSelectedPlace]=useState（{}）；
const renderedList=places.map（/*业务逻辑*/）
返回(
{renderedList}
{
const onCityWeather=（selectedPlace）=>{
API_调用。然后（（响应）=>{
console.log（response）/*从API中正确检索所有信息
{                                       
配置：{…}，
数据：{当前：{
时间:102348904，
总结：'多云'，…}
}                                                                                                   
}*/
返回响应/*不在屏幕上显示信息*/
})
}
返回(
{onCityWeather}
)
}

---

来自API调用的信息（在onCityWeather函数中）是成功的console.log，但我不知道如何在屏幕上显示它，因为在oncitywheather函数中返回API调用的响应，所以在屏幕上不显示任何内容。

您能告诉我们应该如何从API调用获得响应吗？它是一个具有嵌套对象的对象：{config:{…}，data:{当前：{time:102348904，摘要：'Cloudy}}}那么它将是一个无效的react对象，因为您必须返回jsx

const CityDetail=()=>{
        const onCityWeather=(selectedPlace)=>{
                API_call.then((response)=>{
                        console.log(response) /*Retrieve correctly all information from API         
                    {                                       
                     config:{...},                                                                                                                
                     data: {currently:{                                                             
                                 time:102348904,                                                             
                                 summary:'Cloudy',...}                                                                     
                               }                                                                                                   
                    }*/
                        return response /*Don't display the information in the screen*/ 
                     })
            }
         return (
              <div>
                   <SelectedPlaceContext.Consumer>
                      {onCityWeather}
                   </SelectedPlaceContext.Consumer>
              </div>
           )
     }