无法在 React 中访问数组索引

Question

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

我真的不知道...

Here is Component

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

Answer 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>;
};

我们的目标是创建一个应用程序，将月份名称列表显示为 hyperlinks （MonthName Component），并在单击其中任何一个时links，我们应该导航到 YearMonth 组件。

现在，单击月份的 link 时会发生什么。生成了两个事件，一个 routing 事件和一个 onClick 事件注册在 div .并且这两个事件都传递给功能组件 YearMonth.

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

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

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

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

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

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。

无法在 React 中访问数组索引

Can't access array index in React

reactjs

react-router

react-router-v4

react-router-dom