How to get value from this.state. Property of undefined

问题

I'm trying to pass value from one component to another. First one looks like this:

class ListStation extends Component {
    constructor(props) {
        super(props)

        this.state = {
            stations: []
        }

        this.editStation = this.editStation.bind(this);
    }


    editStation(id) {
        this.props.history.push(`/add-station/${id}`);
    }

    componentDidMount() {
        StationService.getStations().then((res) => {
            this.setState({ stations: res.data });
        })
    }

    }

    render() {
        return (
            <div>

                        <tbody>
                            {this.state.stations.map(
                                station =>
                                    <tr key={station.id}>
                                        <td>{station.city}</td>
                                        <td>{station.name}</td>
                                        <td>
                                            <button onClick={() => this.editStation(station.id)} className="btn btn-info">Modify</button>
                          ...                  
                </div>
            </div>
        );
    }
}

export default ListStation;

And another looks like this:

import React, { Component } from 'react';
import StationService from '../services/StationService';

class CreateStationComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            station: {
                id: this.props.match.params.id,
                city: '',
                name: '',
                trains: [
                    {
                        number: '',
                        numberOfCarriages: ''
                    }
                ]
            }
        }

        this.changeCityHandles = this.changeCityHandles.bind(this);
        this.changeNameHandles = this.changeNameHandles.bind(this);
        this.saveStation = this.saveStation.bind(this);
    }

    componentDidMount() {

        if (this.state.station[0].id === '_add') {
            return;
        } else {
            StationService.getStationById(this.state.id).then((res) => {
                let station = res.data;
                this.setState({ name: station[0].name, city: station[0].city })
            });
        }
        console.log(this.state.station.city + 'dfddddd');
    }

But when I try to pass value from one component to another I get error: Property of undefined. The response I get from API looks like this:

I'm trying to edit values based on the id taken from the first component but it seems to fail.

回答1:

if (this.state.station[0].id === '_add') {
        return;
    }

Have a look at this if statement from your codebase I think you should remove [0] after this.state.station ... this is because station is an object not an Array

回答2:

Change it to if (this.state.station.id === '_add') {

来源：https://stackoverflow.com/questions/65637202/how-to-get-value-from-this-state-property-of-undefined

标签

javascript

reactjs

undefined