Блог

Я пытаюсь заполнить параметры выпадающего списка всеми заголовками из этого API.

Я пытаюсь:

• Сохраните заголовки в заголовках: [] объект
• Сопоставьте все эти заголовки с отдельными элементами

Но я получаю сообщение об ошибке

Необработанное отклонение (TypeError): невозможно преобразовать undefined или null в 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>    
  

Вы действительно должны использовать 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)]
    })
  );
};
  

Вы получаете сообщение об ошибке как «Необработанное отклонение (ошибка типа): невозможно преобразовать undefined или null в object» из-за ответа.данные представляют собой массив. Object.key() может применяться только к объектам. Попробуйте функцию map(), чтобы извлекать объекты один за другим.