React中处理存在级联变化的互依赖表单的最优方案

核心思路：状态提升+自定义Hook拆分逻辑 #

状态提升是处理跨组件联动的基础，但不需要把所有领域逻辑都塞进顶层组件。你可以将数据加载、转换这类领域逻辑封装到自定义Hook中，顶层组件只负责维护全局状态、协调联动规则，子组件保持纯净的受控渲染，这样既满足联动需求，又避免顶层逻辑臃肿。

具体实现步骤 #

1. 拆分自定义Hook，封装领域逻辑 #

每个react-select组件的数据加载、选项转换逻辑，都可以封装成独立的自定义Hook，让职责更清晰：

// 自定义Hook：处理Select A的数据逻辑
const useSelectA = () => {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      // 模拟异步加载A的选项数据
      const res = await fetch('/api/select-a-options');
      const data = await res.json();
      // 转换为react-select需要的格式（{value, label}）
      const formattedOptions = data.map(item => ({
        value: item.id,
        label: item.name
      }));
      setOptions(formattedOptions);
      setLoading(false);
    };
    fetchData();
  }, []);

  return { options, loading };
};

// 自定义Hook：处理Select B的数据逻辑，依赖A的选中值
const useSelectB = (selectedAValue) => {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!selectedAValue) {
      setOptions([]);
      return;
    }
    const fetchData = async () => {
      setLoading(true);
      // 根据A的选中值加载B的选项
      const res = await fetch(`/api/select-b-options?a=${selectedAValue}`);
      const data = await res.json();
      const formattedOptions = data.map(item => ({
        value: item.id,
        label: item.name
      }));
      setOptions(formattedOptions);
      setLoading(false);
    };
    fetchData();
  }, [selectedAValue]);

  return { options, loading };
};

// 自定义Hook：处理Select C的数据逻辑，依赖A和B的选中值
const useSelectC = (selectedAValue, selectedBValue) => {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!selectedAValue || !selectedBValue) {
      setOptions([]);
      return;
    }
    const fetchData = async () => {
      setLoading(true);
      // 根据A和B的选中值过滤加载C的选项
      const res = await fetch(`/api/select-c-options?a=${selectedAValue}&b=${selectedBValue}`);
      const data = await res.json();
      const formattedOptions = data.map(item => ({
        value: item.id,
        label: item.name
      }));
      setOptions(formattedOptions);
      setLoading(false);
    };
    fetchData();
  }, [selectedAValue, selectedBValue]);

  return { options, loading };
};

// 自定义Hook：处理Select D的数据逻辑，依赖C的选中值
const useSelectD = (selectedCValue) => {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!selectedCValue) {
      setOptions([]);
      return;
    }
    const fetchData = async () => {
      setLoading(true);
      // 根据C的选中值加载D的选项
      const res = await fetch(`/api/select-d-options?c=${selectedCValue}`);
      const data = await res.json();
      const formattedOptions = data.map(item => ({
        value: item.id,
        label: item.name
      }));
      setOptions(formattedOptions);
      setLoading(false);
    };
    fetchData();
  }, [selectedCValue]);

  return { options, loading };
};

2. 顶层组件维护全局状态与联动规则 #

顶层组件通过自定义Hook获取各选项数据，维护四个组件的选中状态，并按照你的规则处理联动逻辑：

const CascadingForm = () => {
  // 维护各Select的选中状态
  const [selectedA, setSelectedA] = useState(null);
  const [selectedB, setSelectedB] = useState(null);
  const [selectedC, setSelectedC] = useState(null);
  const [selectedD, setSelectedD] = useState(null);

  // 通过自定义Hook获取选项数据
  const { options: optionsA, loading: loadingA } = useSelectA();
  const { options: optionsB, loading: loadingB } = useSelectB(selectedA?.value);
  const { options: optionsC, loading: loadingC } = useSelectC(selectedA?.value, selectedB?.value);
  const { options: optionsD, loading: loadingD } = useSelectD(selectedC?.value);

  // 处理Select A的变化
  const handleAChange = (newValue) => {
    setSelectedA(newValue);
    
    // 规则1：更新B的选中状态——检查新的B选项中是否有同名（同value）选项
    const matchedB = optionsB.find(opt => opt.value === selectedB?.value);
    setSelectedB(matchedB || null);
  };

  // 处理Select B的变化
  const handleBChange = (newValue) => {
    setSelectedB(newValue);
    
    // 规则2：更新C的选中状态——检查新的C选项中是否有同名选项
    const matchedC = optionsC.find(opt => opt.value === selectedC?.value);
    setSelectedC(matchedC || null);
  };

  // 处理Select C的变化
  const handleCChange = (newValue) => {
    setSelectedC(newValue);
    
    // 规则4：更新D的选中状态——有同名则保留，否则选第一个
    const matchedD = optionsD.find(opt => opt.value === selectedD?.value);
    setSelectedD(matchedD || optionsD[0] || null);
  };

  // 规则3：A变化且B已选中、C未选中时，将C设为与A一致
  useEffect(() => {
    if (selectedA && selectedB && !selectedC) {
      // 检查C的选项中是否有与A同value的选项
      const matchedC = optionsC.find(opt => opt.value === selectedA.value);
      if (matchedC) {
        setSelectedC(matchedC);
      }
    }
  }, [selectedA, selectedB, selectedC, optionsC]);

  // 规则4的补充：当C的选项因联动更新时，自动调整D的选中状态
  useEffect(() => {
    if (optionsD.length === 0) {
      setSelectedD(null);
      return;
    }
    const matchedD = optionsD.find(opt => opt.value === selectedD?.value);
    setSelectedD(matchedD || optionsD[0]);
  }, [optionsD, selectedD]);

  return (
    <div className="cascading-form">
      <div>
        <label>Select A:</label>
        <Select
          value={selectedA}
          onChange={handleAChange}
          options={optionsA}
          isLoading={loadingA}
        />
      </div>
      <div>
        <label>Select B:</label>
        <Select
          value={selectedB}
          onChange={handleBChange}
          options={optionsB}
          isLoading={loadingB}
          isDisabled={!selectedA}
        />
      </div>
      <div>
        <label>Select C:</label>
        <Select
          value={selectedC}
          onChange={handleCChange}
          options={optionsC}
          isLoading={loadingC}
          isDisabled={!selectedA || !selectedB}
        />
      </div>
      <div>
        <label>Select D:</label>
        <Select
          value={selectedD}
          options={optionsD}
          isLoading={loadingD}
          isDisabled={!selectedC}
        />
      </div>
    </div>
  );
};

3. 纯净子组件（可选） #

如果需要复用这些Select组件，可以封装成纯净的受控组件，只负责渲染：

const CustomSelect = ({ label, value, onChange, options, isLoading, isDisabled }) => {
  return (
    <div className="form-group">
      <label>{label}:</label>
      <Select
        value={value}
        onChange={onChange}
        options={options}
        isLoading={isLoading}
        isDisabled={isDisabled}
      />
    </div>
  );
};

关键优势 #

• 职责分离：自定义Hook封装数据逻辑，顶层组件处理状态联动，子组件负责渲染，各部分逻辑清晰，易于维护和测试。
• 可复用性：自定义Hook和纯净子组件可以在其他场景复用，避免重复代码。
• 易于调试：每个逻辑单元独立，出现问题时可以快速定位到对应的Hook或联动回调。

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