为什么即使我以字符串形式将密钥传递给对象给了我正确的值，我的密钥也会给出未定义的值

Question

为什么当 categoryDictonary["Marvel"] 给出 ["WandaVision", "Loki", "Moon Knight"] 时 categoryDictonary[item] 的值未定义，即使 item 的值为 "Marvel"在此处输入图像描述

这是我的相同代码

export default function App() {
var categoryDictonary = {
Marvel: ["WandaVision", "Loki", "Moon Knight"],
SitComs: ["Brooklyn 99", "Big Bang Theory"]};

var categories = Object.keys(categoryDictonary);

function ClickHandler(item) {
console.log(item);
console.log(categoryDictonary["Marvel"]);
console.log(categoryDictonary[item]);
}

return (
<div className="App">
  <h2>TV Show Ratings</h2>
  <h3>Check out my ratings on some of the most popular TV Shows</h3>
  <ul>
    {categories.map((item) => {
      return (
        <li key={item} onClick={() => ClickHandler({ item })}>
          {item}
        </li>
      );
    })}
  </ul>
</div>
);
}

Answer 1

您的ClickHandler(item) item道具不是可以从categoryDictionary获取值的string ，它是一个值为{item: "Marvel"}的对象，因此您必须执行categoryDictionary[item.item]才能获得正确的输出.

编辑：由于现在您发布了完整的代码，您已经将道具项目作为onClick()中的对象传递给ClickHandler({ item }) ，您可以通过将其参数更改为破坏对象function ClickHandler({ item }) ClickHandler function ClickHandler({ item })那么你可以直接做categoryDictionary[item] 。