Выпадающее меню не работает после ввода данных из вызова API - PullRequest
Новая
       6

Выпадающее меню не работает после ввода данных из вызова API

0 голосов
/ 03 августа 2020

Я пытаюсь создать приложение для отслеживания COVID-19, используя фреймворк CSS React and Materialise. Я пытаюсь получить некоторые данные с помощью внешнего API и поместить их в раскрывающееся меню. Я могу console.log результаты, это нормально. Но когда я пытаюсь поместить эти данные в раскрывающееся меню, это раскрывающееся меню не отвечает. Когда я попробовал с жестко запрограммированными значениями, он работал нормально.

Это мое приложение. js. У меня нет никаких компонентов, кроме приложения. js

import React, { Component } from "react";
import "./App.css";

import "materialize-css/dist/css/materialize.min.css";
import M from "materialize-css";

class App extends Component {
  constructor() {
    super();
    this.state = { countries: [] };
  }

  async componentDidMount() {
    document.addEventListener("DOMContentLoaded", function () {
      const elems = document.querySelectorAll("select");
      M.FormSelect.init(elems, {});
    });
    const call = await fetch('https://disease.sh/v3/covid-19/countries');
    const result = await call.json();

    const countries = result.map( (country) => (
      {
        name: country.country,
        value: country.countryInfo.iso2
      }
    ));
    this.setState({countries:countries});
    
  };

  render = () => {
    
    return (
      <div className="App">
        <h3>COVID-19 TRACKER</h3>

        <div className="input-field col s12">
          <select>
            {this.state.countries.map( (country) => {
              return <option value={country.name}>{country.name}</option>
            })}
          </select>
        </div>
      </div>
    );
  };
}

export default App;

Ответы [ 2 ]

1 голос
/ 03 августа 2020

document.addEventListener("DOMContentLoaded") следует разместить за пределами вашего переопределения componentDidMount, поскольку это глобальное событие.

Не используйте ванильный выбор и манипуляции с DOM, такие как document.querySelectorAll(), если вы вообще хотите использовать React, React сохраняет собственное дерево DOM и обновляет его в зависимости от изменений состояния. Вместо этого полагайтесь на повторное выполнение render() каждый раз при изменении состояния, поэтому вам нужно изменить состояние.

Каждый раз, когда вы используете map для создания списков элементов, предоставляйте уникальные keys, чтобы однозначно идентифицировать элементы в дереве React. Ваш источник данных не предоставляет коды ISO для всех элементов, поэтому это ненадежный ключ элемента. Я использовал здесь индекс (то есть счетчик) из функции map, но в идеале вы должны агрегировать надежный уникальный идентификатор из самих данных.

Вот рабочий код:

https://jsfiddle.net/vpcz9efq/

0 голосов
/ 03 августа 2020

Выбранный ответ неверен, потому что он игнорирует Materalize; проблема, похоже, в Materalize css. По какой-то причине выделение отображается правильно, но на нем есть display: none;. Я только что импортировал пользовательский css файл, который имеет: 

select {
  display: flex;
}

Выбор Материализации отображается правильно с этим (вам не нужно ничего менять в своем сообщении)

...