React中如何在Component B内修改Component A的useState对象所有键值为false

首先需要将组件A的setShow状态更新方法传递给组件B，通常可以通过props、Context或者全局状态管理工具实现，以下是最常用的props传递场景的完整实现：

1. 组件A中传递方法给组件B #

在组件A引入组件B的位置传入setShow：

// 组件A内部调用ComponentB的代码
<ComponentB setShow={setShow} />

2. 组件B中实现更新逻辑 #

组件B接收setShow props后，handleShowPanel的代码如下：

const handleShowPanel = (id) => {
  setShow(prevState => {
    // 遍历原有状态所有属性，全部设为false
    const resetState = Object.fromEntries(
      Object.keys(prevState).map(key => [key, false])
    )
    // 仅将传入id对应的属性设为true
    resetState[id] = true
    return resetState
  })
}

兼容低版本环境的写法 #

如果运行环境不支持Object.fromEntries，可以用for in遍历实现：

const handleShowPanel = (id) => {
  setShow(prevState => {
    const resetState = {}
    // 遍历所有属性全部设为false
    for (const key in prevState) {
      if (prevState.hasOwnProperty(key)) {
        resetState[key] = false
      }
    }
    // 仅设置目标id为true
    resetState[id] = true
    return resetState
  })
}

补充说明 #

• 这里采用了React useState的函数式更新写法，直接基于最新的旧状态计算新状态，能避免闭包导致的状态更新异常问题。
• 如果两个组件层级相差较大，多层透传props不方便，可以用React Context、Zustand、Redux等方案共享状态及更新方法，核心的状态更新逻辑和上面的写法一致。

内容的提问来源于stack exchange，提问作者Leo