React中如何在AddMarker与侧边栏兄弟组件间传递useState数组

你这个场景最适合用状态提升的方案处理，既然两个组件的共同父级是App，直接把坐标数组的状态存在App里，再同步给两个子组件即可，具体修改步骤如下：

1. 修改App.js #

把坐标状态移到App中定义，同时写好更新坐标的方法，分别传给侧边栏和AddMarker组件：

function App() {
  // 把原本存在AddMarker里的坐标数组提升到父组件App
  const [coordList, setCoordList] = useState([]);

  // 给AddMarker调用的新增坐标方法
  const addNewCoord = (newCoord) => {
    setCoordList(prev => [...prev, newCoord]);
  }

  return (
    <div className="App" >
      {/* 把坐标数组传给侧边栏组件 */}
      <Sidetabs coordList={coordList}/>

      <MapContainer center={[40.44695, -345.23437]} zoom={3}>
        ..............
        {/* 把新增坐标的方法传给AddMarker */}
        <AddMarker addNewCoord={addNewCoord} />
      </MapContainer>
    </div>
  )
}

2. 修改AddMarker组件 #

删除组件内部的coord状态，直接调用父组件传过来的方法更新坐标：

// 接收父组件传的addNewCoord方法
function AddMarker({addNewCoord}){
  const map = useMapEvents({
    click: (e) => { 
      // 直接调用父组件方法新增坐标，不需要再在当前组件存状态
      addNewCoord(e.latlng);
     },
  // 剩下的原有逻辑保留
  ...
}

3. 修改侧边栏VerticalTabs组件 #

接收父组件传的coordList参数，在路径点面板里渲染坐标列表即可：

// 接收父组件传的coordList
export default function VerticalTabs({coordList}) {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box
      sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 224 }}
    >
      <Tabs
        orientation="vertical"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs"
        sx={{ borderRight: 1, borderColor: 'divider' }}
      >
        <Tab label="Waypoints" {...a11yProps(0)} />
        <Tab label="Sorting" {...a11yProps(1)} />
      </Tabs>
      <TabPanel value={value} index={0}>
        {/* 在这里渲染坐标列表，你也可以换成折叠面板组件 */}
        <ul>
          {coordList.map((coord, index) => (
            <li key={index}>
              标记{index+1}：纬度{coord.lat.toFixed(4)}，经度{coord.lng.toFixed(4)}
            </li>
          ))}
        </ul>
      </TabPanel>
      <TabPanel value={value} index={1}>
        Sorting
      </TabPanel>
    </Box>
  );
}

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