Question

如何在 React 中使用 api 数据填充下拉菜单？

2020-11-10

3399

reactjs

我正尝试使用此 API 中的所有标题填充下拉菜单的选项。

我正尝试：

将标题保存到标题：[] 对象中
将所有这些标题映射到单独的元素中

但我收到了错误

Unhandled Rejection (TypeError): Cannot convert undefined or null to object

有人能给我指出正确的方向吗？

import React from "react"
import Header from "./Header"
import CardContent from "./CardContent"
import axios from "axios";

class CardContainer extends React.Component {
  state = {
    display: [],
    titles: []
  };

  componentWillMount = (e) => {
    axios.get("https://ghibliapi.herokuapp.com/films")
      .then(response => this.setState({
        titles: response.data[Object.keys(response.data.title)],
        display: response.data[Math.floor(Math.random() * response.data.length)]
      }))
  }

  render() {
    return (
      <div className="container">
        <Header />
        <select>
          {this.state.titles.map(title => (
            <option key={title} value={title}>
              {title}
            </option>
          ))}
        </select>

Answer 1

您确实应该使用 componentDidMount 来获取数据，但主要问题是您似乎想要一个包含所有标题的数组，因此您需要映射响应数据并创建此数组。

componentDidMount = (e) => {
  axios.get("https://ghibliapi.herokuapp.com/films").then((response) =>
    this.setState({
      titles: response.data.map(({ title }) => title), // <-- map titles
      display: response.data[Math.floor(Math.random() * response.data.length)]
    })
  );
};

Answer 2

您收到错误“未处理的拒绝（TypeError）：无法将未定义或空值转换为对象”，因为 response.data 是一个数组。Object.key() 只能应用于对象。尝试使用 map() 函数逐个提取对象。