React中如何正确实现联动select下拉框的filter筛选逻辑

实现修正说明 #

• 新增状态存储第一个下拉框选中的属性值，作为第二个下拉框的筛选依据
• 修正第一个下拉框的属性去重逻辑，绑定选中值的更新事件
• 基于选中的属性值对单位数组做过滤，生成第二个下拉框的选项列表
• 修复原有代码的语法错误：React中htmlFor、key为驼峰命名，不能大写开头

你之前的筛选逻辑错误原因是Medida是数组，不存在propriedade属性，需要先把第一个下拉框选中的属性值存到状态里，再用这个状态值作为筛选条件，正确的filter实现如下：

import { useState } from 'react';

function Conversor() {
  const [C1, setC1] = useState('');
  const [C2, setC2] = useState('');
  // 新增状态：存储第一个下拉框选中的属性值
  const [selectedPropriedade, setSelectedPropriedade] = useState('');

  const Medida = [
    {id: 1, Unidade: 'ml',  valor: 1, propriedade: 'Sala'},
    {id: 2, Unidade: 'L', valor: 0.30, propriedade: 'Sala'},
    {id: 3, Unidade: 'L', valor: 9.8, propriedade: 'Quarto'},
    {id: 4, Unidade: 'Kg', valor: 0.01, propriedade: 'Cozinha'},
  ];

  // 第一个下拉框的去重属性选项，简化去重逻辑
  const uniquePropriedades = [...new Set(Medida.map(item => item.propriedade))];
  // 核心联动筛选逻辑：只保留和选中属性匹配的单位
  const filteredUnidades = Medida.filter(item => item.propriedade === selectedPropriedade);
  // 可选补充：如果同一个属性下有重复单位，可以再加一层去重
  // const uniqueFilteredUnidades = [...new Map(filteredUnidades.map(item => [item.Unidade, item])).values()];

  return (
    <div className="conversor">
      <h1>Exemplo</h1>
      <div className="Container">
        <div>
          <label htmlFor="propriedade">Propriedade</label>
          {/* 绑定第一个下拉框的选中值和变更事件 */}
          <select 
            id="propriedade"
            className="propriedade"
            value={selectedPropriedade}
            onChange={(e) => setSelectedPropriedade(e.target.value)}
          >
            {uniquePropriedades.map(prop => (
              <option
                key={prop}
                value={prop}
              >
                {prop}
              </option>
            ))}
          </select>
        </div>
        <div>
          <div className="input">
            <label htmlFor="campo1">Preencha o campo</label>
            <input 
              className="campo 1" 
              type="number" 
              id='campo1' 
              required="required" 
              value={C1} 
              onChange={(e)=> setC1(e.target.value)}
            />
          </div>  
          {/* 第二个下拉框使用筛选后的单位数组 */}
          <select>
            {filteredUnidades.map(item2 => (
              <option
                key={item2.id}
                value={item2.Unidade}
              >
                {item2.Unidade}
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  );
}

export default Conversor

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