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

Question

为什么当 categoryDictonary["Marvel"] 给出 ["WandaVision", "Loki", "Moon Knight"] 时 categoryDictonary[item] 的值未定义，即使 item 的值为“Marvel”[=11] =]

这是我的代码

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 prop 不是可以从 categoryDictionary 获取值的 string，它是一个具有值 {item: "Marvel"} 的对象所以你必须做 categoryDictionary[item.item] 才能得到正确的输出。

编辑：因为现在你发布了完整的代码，你已经将道具项目作为对象传递给 ClickHandler({ item }) onClick() 你可以在 ClickHandler 函数中捕获相同的内容通过将其参数更改为析构对象 function ClickHandler({ item }) 然后您可以直接执行 categoryDictionary[item].

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

Why does my key give an undefined value even if me passing the key to the object in the form of a string gives me the correct value

javascript

reactjs