从 API 调用中输入数据后，下拉菜单不起作用

Question

我正在尝试使用 React 和 Materialize CSS 框架构建一个 COVID-19 跟踪器应用程序。我正在尝试使用外部 API 获取一些数据并将它们放入下拉菜单中。我可以console.log结果，很好。但是当我尝试将该数据放入下拉菜单时，该下拉菜单没有响应。当我尝试使用硬编码值时，它工作正常。

这是我的App.js。 除了App.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;

Answer 1

document.addEventListener("DOMContentLoaded") 应该放在 componentDidMount 覆盖之外，因为它是一个全局事件。

如果您想完全使用 React，请不要使用像 document.querySelectorAll() 这样的香草 DOM 选择和操作，React 保留自己的 DOM 树并根据状态变化更新它.相反，依靠 render() 每次状态改变时重新执行，所以你想做的就是改变状态。

每次使用 map 生成项目列表时，提供唯一的 keys 以唯一标识 React 树中的项目。您的数据源不提供所有元素的 ISO 代码，因此它不是可靠的项目键。我在这里使用了 map 函数的索引（即计数器），但理想情况下，您应该从数据本身聚合一个可靠的唯一标识符。

这是一个工作代码：

https://jsfiddle.net/vpcz9efq/

Answer 2

select编辑的答案不正确，因为它忽略了 Materalize；问题似乎出在 Materalize css 中。出于某种原因，select 正确呈现，但它上面有一个 display: none;。我刚刚导入了一个自定义 css 文件，其中包含：

select {
  display: flex;
}

Materialize select 显示正确（您不需要更改 post 中的任何其他内容）

从 API 调用中输入数据后，下拉菜单不起作用

Drop down menu isn't working after putting data from an API call

javascript

materialize

reactjs