如何从子功能组件更新 React 中的父状态？

问题描述

我需要在两个组件（导航栏和地图）之间绑定状态。两个组件都通过 props 从索引状态接收数据。

如何更新导航栏组件中的索引状态以更新地图组件？

在 index.ts 初始化

this.state: { routes: {geojson_routes},loadaded: false }

在 navbar.tsx 中

const [routes,setRoutes] = React.useState(props.routes)
const [loaded,setLoaled] = React.useState(props.loaded)

const showRoute= () => {
    setLoaled(true)
}

在 map.tsx 中

if(props.loaded == true) show = geojason(props)

我想我需要的是当从导航栏调用 showRoute 时，从 index.ts 更新加载的值...但我不知道如何 ¬¬'

解决方法

您可以将一个将 loaded 状态设置为 true 的函数作为道具传递给 Navbar 组件。然后，当您想将 loaded 设置为 true 时，从导航栏组件调用该函数。