如何修复错误类型错误：无法读取未定义的属性“地图”

Question

The error is given in my map function.

I'm following a reactjs tutorial, and I keep running into an issue when passing the value from the state of one component into another component. I am connecting to back end with axios.get() .

export default class Viewcustomer extends React.Component{

  constructor(props) {
    super(props)

    this.state = {
      Id:"",
      name:"",
      fax:"",    
      NIC: "",
      type: "",
      email: "",
      website: "",
      address: "",
      phoneNo: "",
      DOB: "",
      note: "",
      customer:[]  
    }    
  }

  onChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }

  componentDidMount() {
    axios.get(`http://localhost:5001/customer/view`)
      .then(res => {
         const customers = res.data;
         this.setState({ customers });
      })
  }

  render(){
    return(
      <table width="100%">
        <tr>
          <th>Id</th>
          <th>name</th>
          <th>fax</th>
          <th>NIC</th>
          <th>type</th>
          <th>email</th>
          <th>address</th>
          <th>phoneNo</th>
          <th>DOB</th>
          <th>note</th>

        </tr>
        //Error raised by this line of code
        { this.state.customers.map(customer =>
          <tr>
            <td>{customer.Id}</td>
            <td>{customer.name}</td>
            <td>{customer.fax}</td>
            <td>{customer.NIC}</td>
            <td>{customer.type}</td>
            <td>{customer.email}</td>
            <td>{customer.address}</td>
            <td>{customer.phoneNo}</td>
            <td>{customer.DOB}</td>
            <td>{customer.note}</td>
          </tr>)}
      </table>
    )
  }
}

Image of the error message

Edit

Error relates to the line marked with the quote, issue raised by the map() function, however the underlying issue is the this.state.customers is undefined .

Answer 1

this.state.customers.map(...

The problem is that this.state.customers is set when the component mounts, and only after an asynchronous call with axios returns. That means that when the component is first rendered, this.state.customers will not have been set yet.

Posible solution

Either check if this.state.customers exists before using it, or maybe just initialize it as an empty array. I noticed that you're initializing a customer (singular) as an empty array, is that a typo?

constructor(props) {
    super(props)

    this.state = {
        Id:"",
        name:"",
        fax:"",    
        NIC: "",
        type: "",
        email: "",
        website: "",
        address: "",
        phoneNo: "",
        DOB: "",
        note: "",
        customers:[] // initialize customers, this.state.customers is now defined
    }
}

Answer 2

The first thing you should know is that componentDidMount runs after render method. So in the first render your customer parameter is still [] and even you write a simple console.log() in componentDidMount it runs after render method.

You can understand what is happening by running the code below:

    class Test extends React.Component {
        constructor(props){
           console.log('constructor')
        }
        render(){
          console.log('render')
        }
        componentDidMount(){
          console.log('componentDidMount')
        }
    }

The result will be like this:

constructor

render

componentDidMount

But for solving your problem you should show a spinner or something like this in the time that you are waiting to receive your response from axios. and your component could be like this:

export default class Viewcustomer extends React.Component{

  constructor(props) {
    super(props)

    this.state = {
      Id:"",
      name:"",
      fax:"",    
      NIC: "",
      type: "",
      email: "",
      website: "",
      address: "",
      phoneNo: "",
      DOB: "",
      note: "",
      customer:[]  
    }    
  }

  onChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }

  componentDidMount() {
    axios.get(`http://localhost:5001/customer/view`)
      .then(res => {
         const customers = res.data;
         this.setState({ customers });
      })
  }

  render(){
    if(this.state.customers.length===0){
    return(
     <div>Loading...</div>
    )
    }
    else{
    return(
      <table width="100%">
        <tr>
          <th>Id</th>
          <th>name</th>
          <th>fax</th>
          <th>NIC</th>
          <th>type</th>
          <th>email</th>
          <th>address</th>
          <th>phoneNo</th>
          <th>DOB</th>
          <th>note</th>

        </tr>
        //Error raised by this line of code
        { this.state.customers.map(customer =>
          <tr>
            <td>{customer.Id}</td>
            <td>{customer.name}</td>
            <td>{customer.fax}</td>
            <td>{customer.NIC}</td>
            <td>{customer.type}</td>
            <td>{customer.email}</td>
            <td>{customer.address}</td>
            <td>{customer.phoneNo}</td>
            <td>{customer.DOB}</td>
            <td>{customer.note}</td>
          </tr>)}
      </table>
    )
    }
  }
}

Please vote me up if it was helpful:)

Answer 3

Your problem is that in the usage you're using this.state.costumers and your define state is customer .

export default class Viewcustomer extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            Id: "",
            name: "",
            fax: "",
            NIC: "",
            type: "",
            email: "",
            website: "",
            address: "",
            phoneNo: "",
            DOB: "",
            note: "",
            customers: []


        }

    }

    onChange = (e) => {
        this.setState(
            { [e.target.name]: e.target.value }
        )
    }
    componentDidMount() {
        axios.get(`http://localhost:5001/customer/view`)
            .then(res => {
                const customers = res.data;
                this.setState({ customers });
            })
    }


    render() {
        const { costumers } = this.state:
        return (
            <table width="100%">
                <tr>
                    <th>Id</th>
                    <th>name</th>
                    <th>fax</th>
                    <th>NIC</th>
                    <th>type</th>
                    <th>email</th>
                    <th>address</th>
                    <th>phoneNo</th>
                    <th>DOB</th>
                    <th>note</th>

                </tr>
                {customers.map(customer =>
                    <tr>
                        <td>{customer.Id}</td>
                        <td>{customer.name}</td>
                        <td>{customer.fax}</td>
                        <td>{customer.NIC}</td>
                        <td>{customer.type}</td>
                        <td>{customer.email}</td>
                        <td>{customer.address}</td>
                        <td>{customer.phoneNo}</td>
                        <td>{customer.DOB}</td>

                        <td>{customer.note}</td>
                    </tr>)}
            </table>


        )
    }
}

That's the whole problem because when you initialize the costumers state as an empty Array, the map method will stop failing. Hope this helps. Best Regards.

Answer 4

As noted in other answers this.state.customers is undefined throwing the error. This is because initially in the constructor you are initialising customer singular and not customers , quick change should fix this.

Can I recommend since you are looking at tutorials, React Hooks are a really powerful and intuitive way of using "stateless" (they do still hold a state) functional components instead of class components. They simplify the coding of components massively and make handling state far easier.