如何将Coord组件的value/onChange与React对象类型useState钩子关联？

我有一个名为Coord的组件，它使用两个SliderField来设置坐标的X和Y值（Y的默认值为50）。目前我创建了Alice和Bob两个Coord实例，通过四个useState钩子分别跟踪它们的X和Y值。我希望改用名为coordList的对象类型useState钩子来统一管理所有坐标，请问如何将该钩子传入组件，以替代原有四个钩子来跟踪每个坐标的X和Y值？

原代码如下：

function App({ }) {
  const [coordAliceX, setCoordAliceX] = useState(0);
  const [coordAliceY, setCoordAliceY] = useState(50);
  const [coordBobX, setCoordBobX] = useState(0);
  const [coordBobY, setCoordBobY] = useState(50);

  // 如何改用这个？
  const [coordList, setCoordList] = useState({
    Alice: { x:0, y:50 },
    Bob: { x:0, y:50 },
  });

  return (
    <View className="App">
      <Coord 
        coordName={'Alice'}
        xVal={coordAliceX} 
        yVal={coordAliceY} 
        onXChange={setCoordAliceX} 
        onYChange={setCoordAliceY} 
      /> 
      <Coord 
        coordName={'Bob'}
        xVal={coordBobX} 
        yVal={coordBobY} 
        onXChange={setCoordBobX} 
        onYChange={setCoordBobY} 
      /> 
    </View>
  );
}

function Coord({ coordName, xVal, yVal, onXChange, onYChange }) {
  return (
    <>
      <SliderField
        label="CoordX"
        name={"coordx"+coordName}
        min={0}
        max={100}
        value={xVal}
        onChange={onXChange}
      />
      <SliderField
        label="CoordY"
        name={"coordy"+coordName}
        min={0}
        max={100}
        value={yVal}
        onChange={onYChange}
      />
    </>
  );
};

解决方案 #

你可以通过以下步骤改造代码，用统一的coordList状态管理所有坐标：

1. 移除独立的坐标状态 #

直接删除四个单独的useState钩子，仅保留coordList的状态定义。

2. 自定义状态更新函数 #

不再直接传递原生setter给Coord组件，而是编写自定义的更新函数，通过函数式更新方式修改coordList中对应实体的坐标属性，确保基于最新状态进行修改。

改造后的完整代码 #

import { useState } from 'react';

function App({ }) {
  // 仅保留统一的坐标状态
  const [coordList, setCoordList] = useState({
    Alice: { x: 0, y: 50 },
    Bob: { x: 0, y: 50 },
  });

  // 更新指定实体的X坐标
  const handleXChange = (name, newValue) => {
    setCoordList(prevState => ({
      ...prevState,
      [name]: {
        ...prevState[name],
        x: newValue
      }
    }));
  };

  // 更新指定实体的Y坐标
  const handleYChange = (name, newValue) => {
    setCoordList(prevState => ({
      ...prevState,
      [name]: {
        ...prevState[name],
        y: newValue
      }
    }));
  };

  return (
    <View className="App">
      <Coord 
        coordName={'Alice'}
        xVal={coordList.Alice.x} 
        yVal={coordList.Alice.y} 
        onXChange={(val) => handleXChange('Alice', val)} 
        onYChange={(val) => handleYChange('Alice', val)} 
      /> 
      <Coord 
        coordName={'Bob'}
        xVal={coordList.Bob.x} 
        yVal={coordList.Bob.y} 
        onXChange={(val) => handleXChange('Bob', val)} 
        onYChange={(val) => handleYChange('Bob', val)} 
      /> 
    </View>
  );
}

function Coord({ coordName, xVal, yVal, onXChange, onYChange }) {
  return (
    <>
      <SliderField
        label="CoordX"
        name={"coordx"+coordName}
        min={0}
        max={100}
        value={xVal}
        onChange={onXChange}
      />
      <SliderField
        label="CoordY"
        name={"coordy"+coordName}
        min={0}
        max={100}
        value={yVal}
        onChange={onYChange}
      />
    </>
  );
};

关键说明 #

• 使用扩展运算符(...)复制原有状态对象和实体坐标，遵循React状态不可变的原则，避免直接修改原始状态。
• 函数式更新(prevState => ...)确保每次更新都基于最新状态值，规避闭包导致的状态滞后问题。
• 后续新增实体（如Charlie）时，只需在coordList初始状态中添加对应项，复用现有更新函数即可，扩展性更强。

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