无法在 React 中访问数组索引答案

【问题标题】：Can't access array index in React无法在 React 中访问数组索引
【发布时间】：2021-04-28 10:55:21
【问题描述】：

这个组件正在映射一个数组，我通过 onClick 在另一个函数中传递数组的 index，在控制台之后我得到了 Object。

我真的不知道...

这里是组件

const MonthName = () => {
 return <>
   {month.map((nameOfMonth , index) => 
    <div key={index}  onClick={() =>CurrentMonthDates(index)}>
    <Link to="/yearMonth" >
    <div> 
      <h3>{nameOfMonth}</h3>
      </div>
      </Link>
    </div>)}
    </>

我在这里传递索引

const CurrentMonthDates = (index) => {
 console.log(index)
}

查看我得到的这个对象的图像

enter image description here

【问题讨论】：

标签： reactjs react-router react-router-dom react-router-v4

【解决方案1】：

让我们从头开始看你的例子：

import { Link, BrowserRouter, Route } from "react-router-dom";
export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <MonthName />
        <Route path="/yearMonth" component={YearMonth} />
      </BrowserRouter>
    </div>
  );
}

let month = ["Jan", "Feb", "March"];

const MonthName = () => {
  return (
    <>
      {month.map((nameOfMonth, index) => (
        <div key={index} onClick={() => YearMonth(index)}>
          <Link to="/yearMonth">
            <div>
              <h3>{nameOfMonth}</h3>
            </div>
          </Link>
        </div>
      ))}
    </>
  );
};

const YearMonth = (index) => {
  return <div>{console.log(index)}</div>;
};

我们的目标是创建一个应用程序，将月份名称列表显示为超链接（MonthName 组件），单击任何这些链接时，我们应该导航到YearMonth 组件。

现在，当点击一个月的链接时会发生什么。生成两个事件，一个 routing 事件和一个注册在 div 中的 onClick 事件。并且这两个事件都被传递给功能组件YearMonth。

因此，当 onClick 事件执行时，它会将当前索引传递给功能组件，因此它会被记录。

现在，当触发路由事件时，语句

<Route path="/yearMonth" component={YearMonth} />

被执行，组件 YearMonth 被渲染。但是在使用 react-routing 机制时，Route 组件总是将路由对象作为函数参数传递给它们渲染的组件。在这种情况下，YearMonth 组件。由于 YearMonth 组件接受单个参数，因此 index 参数现在指向这个对象，因此它会被记录。

解决这个问题的一个简单方法是用新函数替换 onClick 处理程序中的 YearMonth 组件，并从 YearMonth 中删除日志记录strong> 组件。

import { Link, BrowserRouter, Route } from "react-router-dom";
export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <MonthName />
        <Route path="/yearMonth" component={YearMonth} />
      </BrowserRouter>
    </div>
  );
}

let month = ["Jan", "Feb", "March"];

function yearMonth(index){
  console.log(index);
}

const MonthName = () => {
  return (
    <>
      {month.map((nameOfMonth, index) => (
        <div key={index} onClick={() => yearMonth(index)}>
          <Link to="/yearMonth">
            <div>
              <h3>{nameOfMonth}</h3>
            </div>
          </Link>
        </div>
      ))}
    </>
  );
};

const YearMonth = () => {
  return <div>Hi</div>;
};

要详细了解路由的工作原理，请follow this article。

【讨论】：

Charchit 这个对象我只有在我添加 React-router 的时才得到..没有我可以轻松访问。
嗨，Kamlesh，我认为问题在于您映射对象的方式。您的组件中包含一个 Link 组件，并且最大的 div 和 Link 都是可点击的。因此，每当您单击它时，会同时拍摄两个事件，请尝试将其直接映射到 Link 对象。尝试在 onClick 函数中记录事件对象，它可能会提供有价值的见解。
尝试提供一些你的源代码，这将有助于理解下面发生的事情。
嗨 Charchit，如果我返回 Link 并将所有 JSX 映射到 Link 中，问题仍然存在。
在此组件中即时映射.. pastie.org/p/6k65IrNMQu05DWc59077dr 在此处传递索引； pastie.org/p/2Yiss9yHsq3plsJzsnb32b