Попытка использовать поиск по словарю для динамического сопоставления параметров в выпадающем списке выбора - PullRequest
Новая
       7

Попытка использовать поиск по словарю для динамического сопоставления параметров в выпадающем списке выбора

0 голосов
/ 05 февраля 2020

У меня есть компонент реагирования, который включает в себя словарь пар ключ / значение, представляющих аббревиатуры штатов США для ключа и их полное имя в качестве значения, например: 

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

У меня также есть ответ API, который отправляет вернуть state как часть вложенного объекта 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>

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Поскольку у вас есть { сразу после =>, ваша функция стрелки использует форму FunctionBody , а { и окончание } являются блоком функции, а не литералом объекта. Итак, у вас есть код в функции, который выглядит следующим образом: 

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>
0 голосов
/ 07 февраля 2020

Я закончил работу над этим, объединив несколько функций отображения вместе с фильтром, подобным: 

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

  function getUnique(activeStates, comp) {

    const unique = activeStates
      .map(e => e[comp])
      // store the keys of the unique states
      .map((e, i, final) => final.indexOf(e) === i && i)
      // eliminate the duplicate keys and store unique states
      .filter(e => activeStates[e]).map(e => activeStates[e]);
     return unique;
  }

  let uniqueStates = getUnique(activeStates, 'abbr')

Немного окольным путем, но все заработало, и теперь все параметры отображаются правильно. Спасибо TJ за отличные предложения!

...