时间戳

首页 > 解决方案 > ListGroup 呈现错误的值

reactjs - ListGroup 呈现错误的值

问题描述

我有一个 Tabs 组件，如下面的代码所示

function App() {
  return (
    <div className="App">
      <Tabs defaultActiveKey="categories" id="uncontrolled-tab-example">
      <Tab eventKey="categories" title="Categories">
        <Categories />
      </Tab>
      <Tab eventKey="products" title="Products">
        <Products />
      </Tab>
    </Tabs>
    </div>
  );

在每个选项卡内，我都有一个列表组，如下所示

<ListGroup id="categoriesList">
    {categories.map((category, index) => (
        <ListGroup.Item key={category.index} action onClick={(e) => {this.categoryClicked(e,category)}}>
                                    {category.Name}
        </ListGroup.Item>
    ))}
</ListGroup>

<ListGroup  id="ProductsList">
{products.map((product, index) => (
<ListGroup.Item key={product.key} action onClick={(e) => {this.productClicked(e,product)}}>
                                {product.Name}
</ListGroup.Item>
))}
</ListGroup>

如果我运行代码，两个列表组将使用相同的数据“类别”呈现，如果我颠倒 App.js 中选项卡的顺序，则两者都使用相同的数据但使用“产品”呈现

知道如何解决他的奇怪行为吗？

标签： reactjselectronreact-bootstrap

解决方案

推荐阅读