仅获取地图的第一个元素

Question

我有以下代码，目的是在另一个组件中重复使用，并根据我的对象的id给出不同的link，而我的API return.

问题是，我使用地图功能的方式是在屏幕上多次复制同一个按钮。我想知道如何只获得一个按钮。我能以某种方式在该地图中使用 indexOf 吗？其他一切正常

    const ButtonGroup = (linksReturn) => {
      return linksReturn.map((urlAdress, index) => (
        <div key={index}>
            <button
              target="_blank"
              href={urlAdress["detailsUrl"]}
            >
              Acess Link
            </button>
          </div>
      ));
    };
    const PreviewActions = ({ linksReturn }) => {
      return <div>{ButtonGroup(linksReturn)}</div>;
    };
    export default PreviewActions;

这是我重复使用按钮的代码部分

    import { useEffect } from 'react';
    import { useParams } from 'react-router-dom';
    import PreviewActions from './PreviewActions';

    // ** Store & Actions
    import { getInfo } from '../store/actions/index';
    import { useDispatch, useSelector } from 'react-redux';


    const LicitacaoPreview = () => {
      const dispatch = useDispatch();
      const store = useSelector((state) => state.allInfo);

      const { id } = useParams();
      
      useEffect(() => {
        dispatch(getInfo(id));
      }, [dispatch]);

      return typeof store.lotesData === 'object' ? (
        <div>
              <PreviewActions
                id={id}
                linksReturn={store.infoData}
              />
        </div>
      ) 
    };

    export default LicitacaoPreview;

Answer 1

Array.prototype.map() 不是那样工作的，它会调用作为每个数组元素的参数传入的函数，并 return 生成结果数组。

更好的方法是使用 Array.prototype.slice() 到 return 原始数组的特定部分，然后在其上使用 map()

const ButtonGroup = (linksReturn) => {
    const newArr = linksReturn.slice(startindex, endindex); // replace with your index appropriately
    return newArr.map((urlAdress, index) => (
        <div key={index}>
            <button
                target="_blank"
                href={urlAdress["detailsUrl"]}
            >
                Acess Link
            </button>
        </div>
    ));
};

仅获取地图的第一个元素

Get only the first element of a map

javascript

for-loop

indexof

reactjs

map-function