如何通过Props在组件中按ID筛选并点击展示对象？

问题分析 #

• App组件存在的问题：
  • 点击事件toggleFact未传递当前账单ID，无法记录选中项
  • 向ViewFact传递的selectId取值错误，用了外层数据源的datas.id而非循环中的单个账单ID
  • 循环变量名重复（外层datas和循环内datas），易引发逻辑混淆
• ViewFact子组件存在的问题：
  • 筛选逻辑完全错误：filter的参数是单个账单对象，却当作ID处理，且判断条件props.obj.factures.id === id不成立（数组没有id属性）

修改后的代码 #

App组件 #

添加状态存储选中ID，修正点击事件与Props传递：

import { useState } from 'react';
import ViewFact from './ViewFact';

function App() {
  // 替换为你的实际数据源
  const datas = { factures: [] };
  // 存储选中的账单ID，初始为null
  const [selectedFactId, setSelectedFactId] = useState(null);

  // 点击切换选中状态：重复点击同一ID则取消选中
  const toggleFact = (id) => {
    setSelectedFactId(prev => prev === id ? null : id);
  };

  return (
    <div className="App-container">
      <div className="App-container-left">
        <p>Liste des factures</p>
        <div>
          {/* 循环变量改为facture，避免与外层datas重名 */}
          {datas.factures.map((facture) => (
            <div key={facture.id}>
              <ul>
                <li>
                  N° : {facture.id}|{facture.dateFacture}-{facture.client} -
                  Montant : {facture.montant} €
                </li>
                {/* 点击时传入当前账单ID */}
                <button onClick={() => toggleFact(facture.id)}>
                  Voir
                </button>
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div className="App-container-right">
        {/* 选中ID存在时才渲染子组件，传递账单数组和选中ID */}
        {selectedFactId && <ViewFact factures={datas.factures} selectedId={selectedFactId} />}
      </div>
    </div>
  );
}

export default App;

ViewFact子组件 #

修正筛选逻辑，直接定位选中的账单：

export default function ViewFact(props) {
  // 根据选中ID查找对应账单（ID唯一，用find比filter更高效）
  const targetFacture = props.factures.find(facture => facture.id === props.selectedId);

  if (!targetFacture) {
    return <div>暂无选中账单</div>;
  }

  return (
    <>
      <div>ViewFact Component</div>
      <div>
        <ul>
          <li key={targetFacture.id}>
            N° : {targetFacture.id}|{targetFacture.dateFacture}-{targetFacture.client} - Montant : {targetFacture.montant} €
          </li>
        </ul>
      </div>
    </>
  );
}

核心改动说明 #

• 用useState管理选中ID，实现点击切换选中状态
• 点击按钮时传递当前账单ID给事件处理函数，确保选中状态正确更新
• 子组件通过find方法直接定位目标账单，避免不必要的数组遍历
• 优化Props传递，只传递子组件需要的账单数组和选中ID，减少冗余

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