Блог

Главная - Вопросы по программированию - Ошибка типа: не удается прочитать свойство ‘map’ неопределенного типа, которое появляется при его запуске

Ошибка типа: не удается прочитать свойство ‘map’ неопределенного типа, которое появляется при его запуске

#reactjs

#reactjs

Вопрос:

Каждый раз, когда я использую функцию map с axios, я получаю следующую ошибку.

Ошибка типа: не удается прочитать свойство ‘map’ неопределенного

Код реакции для вызова API:

 import React ,{Component} from 'react'
import axios from 'axios'
 class Api extends Component{
     state={
         content :[]
     }
componentDidMount =()=>{
    axios.get('js/data.json').then(res=>{this.setState({content : res.data.content})
                                        console.log(this.state.content)})
}

    render(){
        const items=this.state.content ;
        const thecontain= items.map((item)=>{
            return(
            <div>
            <p>{item.name}</p>  
            </div>
            )
        })
                              
            return(
           
     <div>{thecontain}</div>
   )}
}
export default Api

Комментарии:

1. не могли бы вы, пожалуйста, предоставить результат ответа API в описании?

2. Являются ли «элементы» массивом? если нет, то произойдет следующее «Не удается прочитать свойство ‘map’ из неопределенного».

3. @AbuSufian На самом деле это выдаст эту ошибку, только если items значение не определено. Если оно определено, но с другим типом данных, оно скажет что-то вроде map не является функцией или не существует. Скорее всего, res.data.content оно не определено в ответе axios, поэтому значение состояния задается из пустого массива, чтобы undefined затем выдать ошибку.

4. «items» — это пустой массив, в который я поместил данные в свой json-файл и определил его

5. @BrianThompson итак, как мне следует выполнить функцию setstate?

Ответ №1:

В общем, одна из причин, по которой TypeError выдается ошибка, заключается в том, что вы пытаетесь выполнить метод, несовместимый с типом this.state.content из ошибки в вашем вопросе, если он выдается отсюда, то это означает, что вы пытаетесь получить доступ к карте из неопределенного типа, который в общем случае не существует. map это прототип метода, который присутствует в массивах, поэтому проверьте, является ли this.state.content array или нет, если array использует его, если нет, по умолчанию это array, чтобы вы не получили ошибку типа, если вопрос TypeError from отсюда. Было бы ясно, если бы трассировка стека была включена в вопрос.

 const items=Array.isArray(this.state.content)? this.state.content:[];
const thecontain= items.map((item)=>{
    return(
    <div>
    <p>{item.name}</p>  
    </div>
    )
})

    return(
        <div>{thecontain}</div>
    )       
}

Комментарии:

1. на самом деле никаких ошибок не появляется, данные тоже не отображаются

2. что означает «помещенные данные тоже не отображаются»

3. Мне интересно, почему вы используете axios для извлечения файла в вашем локальном каталоге

4.Это не решает проблему, это просто усложняет поиск проблемы. Они инициализировали this.state.content пустой массив, поэтому проверка того, что это массив, не решит проблему. Проблема связана с тем, что оно this.state.contents становится неопределенным позже в цикле.

5. «Ошибка указывает на то, что вы пытаетесь получить доступ к свойству / методу, который не существует», это просто неправда. Это указывает на то, что items (тем самым this.state.content ) является undefined .

Ответ №2:

     render(){
    const items=this.state.content;
    let thecontain = null; 
    if(typeof this.state.content === 'object'){
      if(this.state.content.constructor.name == "Array"){
         thecontain= items.map((item)=>{
        return (
           <div>
            <p>{item.name}</p>  
           </div>
        )
      })
     }
    }
        return(
       
        <div>{thecontain}</div>
     )
  }

Комментарии:

1. пожалуйста, проверьте items значение массива. может быть, это [], т. е. там нет элемента.

2. items — это мой файл json, в нем есть данные

3. @HossamThapet я обновил свой ответ. проблема заключалась в проверке типа array . исправлено с помощью if(this.state.content.constructor.name == "Array")

4. Array.isArray() — нет необходимости заходить в конструктор..