Reactjs 单击React onClick仅影响此迭代

我有一个页面，它使用的对象包含列表中的列表。我有正确显示数据的所有组件，但我正在尝试为每个主列表项添加一个切换按钮，以便您可以显示/隐藏其子列表。我以前做过一些东西，当单击时会影响组件的每个实例，因此当您单击

展开

按钮时，它会切换每个主要项的子列表

React对我来说是新事物，我将这个项目部分用作学习工具。我相信这与组件的特定实例的绑定状态有关，但我不确定如何或在何处执行

以下是组件：

const SummaryItem = props => {
  const summary = props.object;

  return(
    <div className="summary_item">
      {Object.entries(summary).map( item =>
        <div>
          Source: {item[0]} <br />
          Count: {item[1].count} <br />
          <button onClick={/*expand only this SummaryItemList component*/}>expand</button>
          <SummaryItemList list={item[1].items} />
        </div>)
      }
    </div>
  );
}

在我的渲染功能中，按钮在onClick中具有切换功能：

expand

我有一个条件

if（isExpanded）

有两个呈现，一个带有SummaryItemList组件，另一个没有

---

除了映射对象之外，还有更好的方法吗？我如何绑定切换的状态以仅影响它应该影响的实例？

我想您可能忘了给每个项指定一个isExpanded，最好的方法是将您的项和项拆分到不同的组件中（在下面的示例中，列出项目和项目）

const{useState}=React；
常量项=（{name，items}）=>{
常量[isExpanded，setIsExpanded]=useState（false）；
常量切换=（）=>{
setIsExpanded（（s）=>！s）；
};
返回(

{name}
{项目&&(
{isExpanded？'-'：'+'}
{isExpanded&}
)}

);
};
常量列表=（{data}）=>{
返回！数据？空：(

{Object.entries（data.map）（[key，{items}]）=>(
))}

);
};
常量应用=（）=>{
常数数据={
A:{
项目：{
AA1:{items:{AAA1:{}，AAA2:{}}，
AA2:{items:{AAA:{}}，
},
},
};
返回；
};
ReactDOM.render（，document.getElementById（'root'）；

正如您所解释的，该按钮只在第一次使用，对吗？谢谢！我能够复制此按钮，并使其正常工作，几乎不做任何更改。与此不同的是，我意识到我没有使用的一些东西是：1.列表组件的

键

属性和2.带括号的React.Fragment组件。我将不得不进一步研究它。但无论哪种方式，这都是一个很好的模板，供我使用和学习。谢谢！

const [isExpanded, setIsExpanded] = useState(false);
const toggle = () => setIsExpanded(!isExpanded);