React中RightPanel增删项时如何更新LeftPanel的Select下拉选项列表

我的页面结构如下所示：

解决方案 #

核心思路是状态提升，因为LeftPanel和RightPanel是平级的兄弟组件，没有直接的数据流通道，所以需要把两个组件共享的条目列表状态放到公共父组件Home中统一管理。

具体实现步骤 #

1. 改造Home组件，将条目状态、拉取列表的逻辑从LeftPanel迁移到Home中，再通过props将状态和更新方法传递给两个子组件。
   示例代码：

import { useState, useEffect } from 'react';
function Home() {
  // 共享的条目列表状态
  const [items, setItems] = useState([]);

  // 拉取后端最新条目列表
  const getItemList = async () => {
    const latestItems = await callRestMethod(url);
    setItems(latestItems);
  }  

  // 页面挂载时拉取一次初始列表，加空依赖数组避免重复执行
  useEffect(() => {
    getItemList();
  }, []);

  return (
    <GridContainer> 
          <Grid> <LeftPanel items={items} /> </Grid> 
          {/* 把刷新列表的方法传递给RightPanel，增删完成后调用即可同步 */}
          <Grid><RightPanel refreshItemList={getItemList} /></Grid>
    </GridContainer>
  );
}

2. 改造LeftPanel组件，不再内部维护items状态，改为接收父组件传递的props渲染下拉选项。
   示例代码：

function LeftPanel({ items }) {
  return (
    <Select> 
          {items.map( (item) => <MenuItem key={item} value={item}> {item} </MenuItem>)}
    </Select>
  );
}

3. 改造RightPanel组件，在新增/删除条目操作成功后，调用父组件传递的刷新方法，即可同步更新LeftPanel的下拉选项。
   示例代码：

function RightPanel({ refreshItemList }) {
  // 新增条目示例
  const handleAdd = async (newItem) => {
    // 调用新增接口
    await addItemRequest(newItem);
    // 刷新全局条目列表
    await refreshItemList();
  }

  // 删除条目示例
  const handleDelete = async (itemId) => {
    // 调用删除接口
    await deleteItemRequest(itemId);
    // 刷新全局条目列表
    await refreshItemList();
  }

  // 原有组件逻辑...
}

扩展说明 #

如果后续项目复杂度提升，组件嵌套层级变深，props层层传递会比较繁琐，可以改用React Context API、Redux、Zustand等状态管理方案来维护全局共享状态。
另外你原示例中LeftPanel的useEffect没有写依赖数组，会导致每次组件渲染都重复拉取接口，建议加上空依赖数组限定只在挂载时执行一次。

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