Обновление React 16 - списки выбора возвращают объект Object

#reactjs #react-16

Вопрос:

У меня есть приложение, с которого я обновляюсь до React 15 React 16

В некоторых случаях сопоставления и использования списка выбора, которые работали, React 15 теперь не работают — я обнаружил, что список выбора возвращает список [object, Object]

Вот мой код

   let carTypes = ["ford", "volvo", "tesla", "BMW"];

  return (
        <div>
          <select>
            {carTypes.map((carType, key) => {
              return (
                <option
                  key={key}
                >
                  <span>{carType}</span>
                </option>)
            })}
          </select>

          <ul>
            {carTypes.map((carType, key) => {
              return (
                <li
                  key={key}
                >
                  <span>{carType}</span>
                </li>)
            })}
          </ul>
        </div>
    )

Итак, в приведенном выше коде список выбора отобразит в браузере список выбора с 4 параметрами — все они читаются [object, Object]

Приведенный ниже неупорядоченный список возвращает 4 элемента и корректно отображает их в браузере, отображая 4 типа автомобилей

Я предполагал, что разметка списков выбора изменилась, React 16 но я не нашел документации об этом

Если кто-нибудь может указать мне правильное направление / совет или показать мне какую-нибудь документацию, это было бы здорово!

1. изменить carType.map((filingType, key) на carTypes.map((filingType, key)

2. Вы просто неправильно написали. Вы поставили CarType, который является массивом, вместо filingType

3. А также CarType не существует вне функции отображения CarTypes

4. Извините за некоторые опечатки @ A.R.SEIF — теперь все исправлено, так что, надеюсь, яснее

5. Извините за некоторые опечатки @DarthJS — теперь все исправлено, так что, надеюсь, яснее

Ответ №1:

я написал этот код .

 let carTypes = ["ford", "volvo", "tesla", "BMW"];

  return (
    <div>
      <select>
        {carTypes.map((carType, key) => {
          return <option key={key}>{carType}</option>;
        })}
      </select>

      <ul>
        {carTypes.map((carType, key) => {
          return (
            <li key={key}>
              <span>{carType}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );

Рабочая демонстрация

Ответ №2:

Удалить тег span из тега option

 let carTypes = ["ford", "volvo", "tesla", "BMW"];

    return (
        <div>
            <select>
                {carTypes.map((carType,key) => {
                    return (
                        <option
                           key={key}
                        >
                            {carType}
                        </option>)
                })}
            </select>

            <ul>
                {carTypes.map((carType, key) => {
                    return (
                        <li
                            key={key}
                        >
                            <span>{carType}</span>
                        </li>)
                })}
            </ul>
        </div>
    )