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

Posted 2023-02-21

【中文标题】尝试使用函数结果时出错，typeError: Cannot read property \'map\' of undefined in React

【英文标题】：Error when trying to use the result of a function, typeError: Cannot read property 'map' of undefined in React尝试使用函数结果时出错，typeError: Cannot read property 'map' of undefined in React

【发布时间】：2021-08-26 08:22:33

【问题描述】：

我是 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  direction="right"  color='white'>
                this.state.opening_crawl
        </marquee>  
        <p>
            this.chars
        </p>
      </div>
    )
  

【参考方案1】：

这行代码报错

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

【讨论】：

当我将字符传递给this.getCharacters(characters)时，它说字符没有定义，同时它已经定义了，我不知道该怎么办

@Seyi 您能否在问题中包含定义characters 内容的代码以及您尝试将其传递给getCharacters() 的代码？如果我们看不到您的尝试，就很难猜出您做错了什么。

@Seyi 根据您的更新，您似乎正在使用 setState 存储数据，但 getCharacters 函数希望将其作为参数接收。 Tuan的回答是正确的；您要么需要在将数据传递给 getCharacters 之前从 state 中检索数据，要么让 getCharacters 在 state 而不是参数中查找它。

@Seyi 作为您的代码，我认为您应该在这里调用该函数：handleChange = (e) => this.setState(opening_crawl:e.value, title:e.label, characters : e.actors,()=> this.getCharacters(e.actors))