时间戳

首页 > 解决方案 > 尝试使用字典查找在选择下拉列表中动态映射选项

javascript - 尝试使用字典查找在选择下拉列表中动态映射选项

问题描述

我有一个反应组件，其中包括一个键/值对字典，表示键的美国州缩写及其全名作为值，例如：

const states = {
  AL: "Alabama",
  AK: "Alaska",
  AZ: "Arizona",
  AR: "Arkansas",
  CA: "California"
}

我还有一个 API 响应，它将 astate作为嵌套address对象的一部分作为缩写发回。所以对于加利福尼亚，API 返回CA

我正在尝试检查针对我的对象的 API 响应，并仅将与字典中的内容匹配的美国州动态映射到选择下拉列表中的选项，但我收到错误说明Expected an assignment or function call and instead saw an expression我的初始函数。

我在下面包含了字典查找功能以及我的组件。

Dictionary lookup - causing the errors

const activeStates = props.locations.map(x => {abbr: x.address.state; name: states[x.address.state]});

React Component with select dropdown

<select>
  <option>
    {Object.entries(activeStates).map((name, abbreviation) => <option key={abbreviation} value={abbreviation}>{name}
  </option>
</select>

标签： javascriptreactjsdictionary

解决方案

因为您在{之后有一个=>，所以您的箭头函数使用FunctionBody形式，并且 the{和结尾}是函数的块，而不是对象文字。所以你在函数中有如下代码：

abbr: x.address.state; name: states[x.address.state]

（我有点惊讶你会收到一个错误；对我来说，它看起来像是使用标签的有效代码，但是......或者错误可能来自下面引用的代码块。）

如果你想使用简洁的形式，把()对象文字放在周围：

const activeStates = props.locations.map(x => ({abbr: x.address.state; name: states[x.address.state]}));
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

您的第二个代码块中还有几个拼写错误，您不必)结束map调用的参数列表，也不必}结束 JSX 表达式。修复那些：

<select>
  <option>
    {Object.entries(activeStates).map((name, abbreviation) => <option key={abbreviation} value={abbreviation}>{name}
  </option>))}
</select>

但是，Object.entries给你一个数组[key, value]数组，所以你的参数列表map应该使用解构而不是两个参数（我也可能避免让它太长，但这是风格问题），它们会相反命令：

<select>
  <option>
    {Object.entries(activeStates).map(([abbreviation, name]) => (
        <option key={abbreviation} value={abbreviation}>{name}</option>
    ))}
</select>

推荐阅读