React项目中如何将下拉组件选中值作为另一组件的筛选值？

我有一个从SQL Server数据库获取政策区域列表的下拉组件，选中的政策区域存入selectedPolicyArea的useState（已将状态提升至父组件，可通过props在其他组件中使用）。还有一个CurrentPolicyStakeholder组件，需要展示对应政策区域的负责人，且当选政策区域变更时同步更新负责人名称（例如：选中Policy Area 1时显示John Doe，选中Policy Area 8时显示Jane Doe）。

尝试过用if/else和三元运算符做条件渲染，但始终返回Stakeholder表中的全部名称；也考虑过在getCurrentActivePolicyStakeholder的SQL查询WHERE子句中使用模板字符串，但未能成功实现，需要相关帮助与建议。

1. 后端修改：支持按政策区域过滤负责人 #

修改API接口（新增查询参数）

更新/GetStakeholder接口，接收前端传递的政策区域名称作为查询参数：

app.get('/GetStakeholder', async(req,res) =>{
    console.log('stakeholder called');
    // 获取前端传入的政策区域参数
    const policyAreaName = req.query.policyAreaName;
    const stakeholderName = await dbOperations.getCurrentActivePolicyStakeholder(policyAreaName)
    res.send(stakeholderName.recordset)
    console.log('called');
})

修改SQL查询（使用参数化查询避免注入）

更新getCurrentActivePolicyStakeholder方法，添加参数化过滤条件，精准匹配选中的政策区域：

const getCurrentActivePolicyStakeholder = async(policyAreaName) => {
    try {
        let pool = await sql.connect(config);
        let stakeholderName = await pool.request()
        // 定义参数化查询变量，防止SQL注入
        .input('policyAreaName', sql.NVarChar, policyAreaName)
        .query(`SELECT S.[Stakeholder_ID]
                ,S.[Employee_ID]
                ,S.[Employee_Preferred_Full_Name]
                ,S.[Stakeholder_Role_ID]
                ,S.[Stake_Table_Name]
                ,S.[Stake_Table_PrimaryKey_ColName]
                ,S.[Stake_Table_PrimaryKey_ID]
                ,PA.Policy_Area_Name
        
                FROM [LegoTest].[dbo].[Stakeholder] S
                join [LegoTest].[dbo].[Policy_Area] PA  ON PA.Policy_Area_ID = S.Stake_Table_PrimaryKey_ID

                WHERE S.Stake_Table_Name = 'Policy_Area'
                -- 添加政策区域过滤条件
                AND PA.Policy_Area_Name = @policyAreaName`
            )
        return stakeholderName;
    }
    catch(error) {
        console.log(error);
    }
}

2. 前端CurrentPolicyStakeholder组件修改 #

同步请求逻辑与渲染逻辑

调整组件逻辑，让它在selectedPolicyArea变化时重新请求对应数据，并正确渲染结果：

import React, { useEffect, useState } from 'react';

const CurrentPolicyStakeholder = (props) => {
    const [stakeholder, setStakeholder] = useState([]);

    useEffect(() => {
        // 未选中政策区域时，清空数据
        if (!props.selectedPolicyArea) {
            setStakeholder([]);
            return;
        }

        const fetchStakeholder = async () => {
            try {
                // 传递政策区域参数到后端接口
                const response = await fetch(`/GetStakeholder?policyAreaName=${encodeURIComponent(props.selectedPolicyArea)}`);
                const data = await response.json();
                setStakeholder(data);
            } catch (error) {
                console.error('Error fetching stakeholder:', error);
                setStakeholder([]);
            }
        };
        fetchStakeholder();
    }, [props.selectedPolicyArea]); // 依赖选中的政策区域，值变化时触发请求

    return(
        <div>
            <h3>Current Stakeholder</h3>
            {stakeholder.length === 0 ? (
                <p>请选择一个政策区域</p>
            ) : (
                <ul>
                    {stakeholder.map((item) => (
                        <li key={item.Stakeholder_ID}>
                            {item.Employee_Preferred_Full_Name}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}
    
export default CurrentPolicyStakeholder;

3. 可选优化：下拉组件内部状态简化 #

由于状态已提升至父组件，下拉组件内部无需维护冗余的selectedPolicyArea状态，直接使用props传递的值即可：

import React, { useState, useEffect } from 'react';

const DropdownGetPolicyArea = (props) => {
 const [policyAreaName, setPolicyAreaName] = useState([]);

 useEffect(() => {
    fetch('/GetPolicyAreaName', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
      .then(res => res.json())
      .then(data => setPolicyAreaName(data))
      .catch(error => console.error('Error fetching data: ', error));
 }, []);

 const handleChange = (event) => {
    props.setSelectedPolicyArea(event.target.value);
 };

 return (
    <div className='DropdownGetPolicyArea'>
      <h2>Policy Area Name</h2>
      <select value={props.selectedPolicyArea} onChange={handleChange}>
        <option value=''>...</option>
        {policyAreaName.map((category) => (
          <option key={category.Policy_Area_ID} value={category.Policy_Area_Name}>
            {category.Policy_Area_Name}
          </option>
        ))}
      </select>
    </div>
 );
};

export default DropdownGetPolicyArea;

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