使用 JavaScript map 或 for...of 访问函数sindie an array答案

【问题标题】：Use JavaScript map or for...of to access functions sindie an array使用 JavaScript map 或 for...of 访问函数sindie an array
【发布时间】：2020-02-13 22:04:17
【问题描述】：

我有一些在 React 中创建的按钮选项卡。当我单击一个时，它会重置所有其他选项卡以显示默认文本。

function resetAllTabs() 可以作为经典的 for 循环正常工作。但是 .map() 或 for...of {} 根本不会重置我的标签。没有错误，只是沉默......

  //// STATE MANAGER FOR TABS
  import React, { useState } from 'react';
  const [currentTab, setCurrentTab] = useState(null);

  const [tab1, setTab1] = useState(<p>SET 1</p>);
  const [tab2, setTab2] = useState(<p>SET 2</p>);
  ...
  const [tab10, setTab10] = useState(<p>SET 10</p>);

  let tabs = [[tab1, setTab1], [tab2, setTab2], [tab3, setTab3], 
              [tab4, setTab4], [tab5, setTab5], [tab6, setTab6], 
              [tab7, setTab7], [tab8, setTab8], [tab9, setTab9], 
              [tab10, setTab10]]

  // WORKS JUST FINE!
  function resetAllTabs() {
    for (let i=0; i<tabs.length; i++) { 
      tabs[i][1](<p>SET {i + 1}</p>) 
    }
  };

  // DOESN'T WORK IN BROWSER. NO ERROR. JUST DOESN'T DO ANYTHING...
  function resetAllTabs() {
    tabs.map = ((setTab, i) => setTab[1](<p>SET {i + 1}</p>));
  };

  resetAllTabs();

【问题讨论】：

你的意思是tabs.forEach((setTab, i) => ...)？
tabs.map = ((setTab, i) => setTab[1](<p>SET {i + 1}</p>)); 用箭头函数覆盖 map 属性。
另外，当您不进行映射操作时，请不要使用.map 进行简单的迭代。如果需要使用迭代方法，则使用forEach。
而且可能你甚至不需要使用迭代方法，just use os for … of。
我没有注意到 .map 后面有一个 = 运算符！现在可以了。我也用 forEach 替换了 map 。谢谢。

标签： javascript arrays reactjs

【解决方案1】：

您在使用地图时遇到了一个小语法错误。虽然看起来很微妙，但您基本上是在使用 = 运算符而不是调用 Array.prototype.map 函数进行赋值

只是为了与你最初写的内容保持一致，你可能打算写这个

function resetAllTabs() {
  return tabs.map( (setTab, i) => setTab[1](<p>SET {i + 1}</p>) );
};

话虽如此，就像 vlaz 指出的那样，您最好使用 forEach 进行迭代

【讨论】：

谢谢。我实际上并不想在这里返回任何东西。
@AlexRainier，如果你想返回 undefined，你可以省略 return 语句