Блог

Главная - Вопросы по программированию - reactjs выдает мне эту ошибку: ошибка типа: this.state.coords.map не является функцией

reactjs выдает мне эту ошибку: ошибка типа: this.state.coords.map не является функцией

#javascript #arrays #reactjs #function #dictionary

Вопрос:

это мой код:

 import React, { Component } from 'react';

class SeasonApp extends Component {
    constructor(props){
        super(props)
        this.state = { 
            coords:[],
            error:[],
        }
    }
    position = (location) => {
        let CoordsObj = {
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
        }
        this.setState({coords:CoordsObj})
    }
    err = (err) => {
        let errorObj = {
            error:err.message,
        }
        this.setState({error:errorObj})
    }
    getLoction = () => {
        window.navigator.geolocation.getCurrentPosition(this.position,this.err)
    }
    render() { 
        return ( 
            <React.Fragment>
                <button onClick={this.getLoction}>Get Location</button>
                {this.state.coords.map(item => { //problem starts from here
                    return(
                        <div>
                            <h2>{item.longitude}</h2>
                        </div>
                    )
                })}
                <h1>error: {this.state.error.error}</h1>
            </React.Fragment>
         );
        }
    }
    export default SeasonApp;

Элемент списка

мой код отлично работает без функции карты, я не понимаю ошибки. я создал новый массив в тесте состояния:[«a»,»b»,»c»] и попробовал сопоставить его, и это сработало

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

1. Вы настраиваетесь coords как объект, у которого нет метода карты. this.setState({coords:CoordsObj})

2. @pilchard спасибо, что пишешь

Ответ №1:

 position = (location) => {
    let CoordsObj = {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
    }
    this.setState({coords:CoordsObj})
}

Здесь вы создали coords объект. Это больше не массив, поэтому его нельзя сопоставить. Если вам нужно, чтобы это был массив, сделайте это:

 position = (location) => {
    let CoordsObj = {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
    };

    let temp_coords = [...this.state.coords];
    temp_coords.push(CoordsObj);
    this.setState({ coords: temp_coords });
};

Или измените код внутри вашего jsx

Ответ №2:

Попробуйте перенести значения в свой массив.

 position = (location) => {
        let CoordsObj = [{
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
        }]; //Note the array []
        this.setState({coords:CoordsObj})
    }
Метки: