如何在React中实现组件状态联动：一个组件状态变化时修改另一个组件状态

你的需求很明确：当AssetType选择框的选项变化时，把AssetTypeCategory的状态重置为0。核心实现逻辑方向是对的，但示例代码里有几个小问题需要修正，下面一步步说明：

核心思路 #

在React函数组件中，要实现一个状态变化时联动修改另一个状态，只需要在触发状态变化的处理函数中，同时调用两个状态的更新方法即可。你写的handleAssetType函数思路没问题，只是需要修正代码里的语法错误。

修正示例代码中的问题 #

1. label标签引号未闭合：htmlFor="AssetType> 缺少闭合引号，应该改成 htmlFor="AssetType"
2. select的value绑定错误：value={state} 应该绑定对应的状态值state.AssetType，否则选择框无法正确回显选中值
3. 函数内语法问题：setAssetType(e.target.value), 末尾的逗号可替换为分号，或直接换行书写另一个setter

完整修正代码 #

import { useState } from 'react';

const AssetSelector = () => {
  // 声明组件状态，可根据实际状态管理方式调整
  const [assetType, setAssetType] = useState('0');
  const [assetTypeCategory, setAssetTypeCategory] = useState('0');
  
  // 模拟AssetType列表数据
  const state = {
    AssetType: [
      { id: '1', name: '设备' },
      { id: '2', name: '工具' },
      { id: '3', name: '耗材' }
    ]
  };

  const handleAssetType = (e) => {
    setAssetType(e.target.value);
    setAssetTypeCategory('0'); // 联动重置分类状态为0
  };

  return (
    <div>
      <label htmlFor="AssetType">Asset Type:</label>
      {Array.isArray(state.AssetType) ? (
        <select
          name="AssetType"
          id="AssetType"
          value={assetType}
          onChange={handleAssetType}
        >
          <option key="0" value="0">
            -- PICK A ITEM--
          </option>
          {state.AssetType.map((x) => (
            <option key={x.id} value={x.id}>
              {x.name}
            </option>
          ))}
        </select>
      ) : null}

      {/* 补充AssetTypeCategory选择框示例 */}
      <div style={{ marginTop: '10px' }}>
        <label htmlFor="AssetTypeCategory">Asset Type Category:</label>
        <select
          name="AssetTypeCategory"
          id="AssetTypeCategory"
          value={assetTypeCategory}
          onChange={(e) => setAssetTypeCategory(e.target.value)}
        >
          <option key="0" value="0">
            -- PICK A CATEGORY--
          </option>
          {/* 可根据AssetType的不同渲染对应分类选项 */}
        </select>
      </div>
    </div>
  );
};

export default AssetSelector;

额外说明 #

• 如果使用Context/Redux等全局状态管理工具，逻辑类似：在handleAssetType中同时分发两个状态更新的action即可。
• 确保AssetTypeCategory选择框正确绑定对应状态值，这样重置为0时才能正确回显默认选项。

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