将函数添加到映射对象中的最后一个元素答案

【问题标题】：Adding function to last element in mapped object将函数添加到映射对象中的最后一个元素
【发布时间】：2020-12-23 13:03:18
【问题描述】：

向映射对象的最后一个元素添加函数时遇到问题。

这是反应。

我有一个函数“handleToggle”——点击后，应该可以看到最后一个 div 的元素。单击后的每个元素都有蓝框 - 一次只有一个。因此，在单击最后一个元素（'底部'）之后，也应该有框架，在此之下我想显示来自 div 的一些其他选项，这些选项位于我的代码末尾。请帮帮我 - 我不知道如何向地图的最后一个元素添加功能。


export default function EditorColor(props) {
  const [isShown, setIsShown] = useState(false);
  const handleToggle = () => setIsShown(!isShown);

  const [isChosen, setChosenIcon] = useState('');

  const contourIcons = [
    { id: 1, type: 'square' },
    { id: 2, type: 'rounded' },
    { id: 3, type: 'circle' },
    { id: 4, type: 'bottom' },
  ];

  const handleChosenIcon = e => {
    setChosenIcon(e.target.title);
    console.log(e.target.title);
  };

  return (
    <div>
      <div>
        {contourIcons.map(icon => (
          <div
            key={icon.id}
            title={icon.type}
            className={`contour ${isChosen === icon.type ? 'active-tab' : ''}`}
            onClick={handleChosenIcon}
          >
            {props.name}
          </div>
        ))}
      </div>
      {isShown && (
        <div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      )}
    </div>
  );
}```

【问题讨论】：

听起来您想将setIsShown(e.target.title == 'bottom'); 添加到您的handleChosenIcon 函数中？
非常感谢，它正在工作！ :)

标签： javascript reactjs function dictionary

【解决方案1】：

不确定这是您想要的，但我所做的是通过检查是否单击了最后一个元素：

           handleChosenIcon(icon.type, index === contourIcons.length - 1);

如果检查通过，将调用handleToggle。如果它不是您想要的，您仍然可以根据示例更改代码以满足您的需求： https://codesandbox.io/s/brave-flower-2bs96?file=/src/App.js:152-164

【讨论】：

【解决方案2】：

据此link。 array.map 有一个名为 index 的可选参数，因此您可以使用它来知道元素的索引现在正在返回

{
contourIcons.map((icon, index) => {
  if(index === contourIcons.length - 1) {
    //return what you want
  }
  return (
    <div
      key={icon.id}
      title={icon.type}
      className={`contour ${isChosen === icon.type ? 'active-tab' : ''}`}
      onClick={handleChosenIcon}
    >
        {props.name}
    </div>
  )})
}

【讨论】：