React受控组件列表状态管理与过滤问题求助

报错翻译 #

警告：组件正在将非受控输入转换为受控输入。这可能是由于值从未定义变为已定义的值导致的，这种情况不应该发生。请在组件的生命周期内决定使用受控或非受控输入元素。

核心问题 #

1. 初始值传递错误：父组件中position数组索引为0、1、2，但循环时i从1到3，传递state={position[i]}会导致i=3时position[3]为undefined，Switch组件初始checked值为undefined，触发非受控转受控警告。
2. 状态更新逻辑混乱：onBayClick中的数组更新逻辑错误，else分支直接追加false会导致数组长度持续增加，且slice操作无法正确切换对应索引的状态。
3. 筛选逻辑无效：直接过滤React元素数组myBays无法获取组件状态，因为元素的props存储在props对象中，且应该基于状态数组而非已渲染元素进行筛选。

修复代码 #

父组件修正版 #

export const Parking = () => {
  // 初始化3个车位状态，索引0-2对应车位1-3
  const [positions, setPositions] = useState([false, false, false]);

  // 切换对应车位的激活状态
  const onBayClick = (index) => {
    const newPositions = [...positions];
    newPositions[index] = !newPositions[index];
    setPositions(newPositions);
  };

  // 筛选出状态为true的车位编号
  const getActiveBays = () => {
    return positions
      .map((isActive, idx) => isActive ? idx + 1 : null)
      .filter(Boolean);
  };

  return (
    <>
      {/* 渲染所有车位组件，传递正确的索引与状态 */}
      {positions.map((isChecked, idx) => (
        <BayForm
          key={idx + 1}
          bayNumber={idx + 1}
          isChecked={isChecked}
          onClick={() => onBayClick(idx)}
        />
      ))}

      {/* 展示筛选结果 */}
      <div>
        <h3>已激活车位：</h3>
        {getActiveBays().length > 0 ? (
          <ul>
            {getActiveBays().map(num => <li key={num}>车位{num}</li>)}
          </ul>
        ) : (
          <p>暂无已激活车位</p>
        )}
      </div>
    </>
  );
};

子组件修正版 #

const BayForm = ({ bayNumber, isChecked, onClick }) => {
  return (
    <FormGroup>
      <FormControlLabel
        control={
          <Switch
            checked={isChecked}
            onChange={onClick}
            color='warning'
          />
        }
        label={`车位 ${bayNumber}`}
      />
    </FormGroup>
  );
};

关键修复点 #

• 传递给子组件的状态改为positions[idx]，确保Switch初始checked为布尔值，彻底消除非受控转受控警告。
• 状态更新采用复制数组后修改对应索引的方式，符合React状态不可变原则，逻辑清晰不易出错。
• 筛选逻辑基于positions状态数组实现，直接获取激活车位编号，避免操作React元素数组的无效逻辑。

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