尝试使用函数结果时出错，typeError: Cannot read property 'map' of undefined in React

Question

我是 React 的新手，我已经在下拉列表中有一个电影列表，但我正在尝试从这个 json 数据中获取名称、年龄和身高并显示它，我想获取出现在电影(http://swapi.dev/api/films) 并列出名称， 性别和身高： 这是我从 api 获取的其中一部电影的角色列表

"results": [
        {
            "title": "A New Hope",
            "episode_id": 4,
            
            "director": "George Lucas",
            "producer": "Gary Kurtz, Rick McCallum",
            "release_date": "1977-05-25",
            "characters": [
                "http://swapi.dev/api/people/1/",
                "http://swapi.dev/api/people/2/",
                "http://swapi.dev/api/people/3/",
                "http://swapi.dev/api/people/4/",
                "http://swapi.dev/api/people/5/",
                "http://swapi.dev/api/people/6/",
                "http://swapi.dev/api/people/7/",
                "http://swapi.dev/api/people/8/",
                "http://swapi.dev/api/people/9/",
                "http://swapi.dev/api/people/10/",
                "http://swapi.dev/api/people/12/",
                "http://swapi.dev/api/people/13/",
                "http://swapi.dev/api/people/14/",
                "http://swapi.dev/api/people/15/",
                "http://swapi.dev/api/people/16/",
                "http://swapi.dev/api/people/18/",
                "http://swapi.dev/api/people/19/",
                "http://swapi.dev/api/people/81/"
            ],

那么字符仍然有 /people/ 端点

{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "http://swapi.dev/api/planets/1/",
    "films": [
        "http://swapi.dev/api/films/1/",
        "http://swapi.dev/api/films/2/",
        "http://swapi.dev/api/films/3/",
        "http://swapi.dev/api/films/6/"
    ],

这是我的代码：

import React, { Component } from 'react'
import Select from 'react-select'
import axios from 'axios'

export default class Contact extends Component {

  constructor(props){
    super(props)
    this.state = {
      selectOptions : [],
      opening_crawl: "",
      title: '',
      characters: ''
    }
  }

 async getOptions(){
    const res = await axios.get('https://swapi.dev/api/films/')
    const data = res.data
    const options = data.results.map(d => ({
      "value" : d.opening_crawl,
      "label" : d.title,
      "actors" : d.characters
    }))

    this.setState({selectOptions: options})

  }
  handleChange = (e) => {
   this.setState({opening_crawl:e.value, title:e.label, characters: e.actors})
  }

  getCharacters(characters){
    const options = characters.map(d => ({
      "name" : d.name,
      "gender" : d.gender,
      "height" : d.height
    }))
    this.setState({chars: options})

  }

  debugger;

  componentDidMount(){
      this.getOptions()
      this.getCharacters()
  }

  render() {
    console.log(this.state.selectOptions)
    return (
      <div>
        <Select options={this.state.selectOptions} onChange={this.handleChange} />
        <marquee width="1200px" direction="right" height="50px" color='white'>
                {this.state.opening_crawl}
        </marquee>  
        <p>
            {this.chars}
        </p>
      </div>
    )
  }
}

Answer 1

这行代码报错

componentDidMount(){
      this.getOptions()
      this.getCharacters() // you pass nothing to this function so you got that error
  }