在 React 中使用 List 和 map 时触发第一个列表项答案

【问题标题】：Triggering the first list item while using List with map in React在 React 中使用 List 和 map 时触发第一个列表项
【发布时间】：2021-03-08 21:55:56
【问题描述】：

我正在通过地图功能显示列表项。但我希望列表项自动触发并显示一些东西，例如我只是为此使用 console.log。所以第一个列表项应该自动触发它的 onClick 函数。有没有办法在反应中实现这一点？

...

import React, { useState } from "react";

import ListGroup from "react-bootstrap/ListGroup";
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";

import "./App.css";

const App = () => {
  const [data, useData] = useState([
    { list: "appelllll" },
    { list: "ballllslsss" },
    { list: "cattsssssss" },
    { list: "dogssssss" },
    { list: "eggssss" },
    { list: "fatssssssssssssssssssss" },
    { list: "goatssssssssssssssss" },
    { list: "heloooooooooooooooooo" },
    { list: "ieloooooooooooooo" },
    { list: "jelooooooooo" },
    { list: "kelooooooo" },
    { list: "leooo" },
    { list: "melosdsadsado" }
  ]);

  return (
    <Container className="p-3">
      <ListGroup
        className="list_menu"
        horizontal
        style={{
          overflowX: "scroll"
        }}
      >
        <button>+</button>
        {data.map((data, i) => {
          return (
            <div>
              <ListGroup.Item
                className="list_item"
                key={i}
                onClick={() => console.log(data)}
              >
                {data.list}
              </ListGroup.Item>
            </div>
          );
        })}
        <button> > </button>
      </ListGroup>
    </Container>
  );
};

export default App;

...

工作代码在这里https://codesandbox.io/s/vigorous-rgb-koiwf?file=/src/App.js

【问题讨论】：

不太确定我是否理解要求。您希望项目具有onClick 函数，对于第一个项目仅您希望在......呈现时触发其onClick？
我将类别作为列表项，当我单击每个类别时，它会显示该类别中的项目。但是当页面呈现时，我只看到类别并且必须单击其中一个才能显示它的项目。我想要的是，每当页面呈现第一个类别时，应该自动显示它的项目。希望你现在能看懂图片了。
嗯，我明白了。但是，答案取决于您实际显示这些类别项目的方式。它们是否也存储在状态中？您能否在必须单击它的位置添加完整的当前代码，然后它会显示项目而不仅仅是console.log
是的，json 看起来像这样 {[ {category1, [item1, item2]}, {category2, [item3, item4]} ]}
我会尽力做到这一点，谢谢

标签： javascript css reactjs bootstrap-4

【解决方案1】：

我认为最好这样做：

onClick={() => {
   if(i === 0)
     console.log(data)
}}

【讨论】：