2. Algorithm
  3. javascript - TypeError: Cannot destructure property 'id' of 'this.props.Name' as it is undefined

javascript - TypeError: Cannot destructure property 'id' of 'this.props.Name' as it is undefined

admin2025-04-21  1

Could you pleases helping me fix in this problem.

TypeError: Cannot destructure property 'id' of 'this.props.Name' as it is undefined.

src/ponent/Detail.js file

import React, { Component } from 'react';
import { Character } from './Data_Character/Character';
import Total from './Total';

export default class Detail extends Component {
    constructor(props) {
        super(props);

        this.state = {
            names: Character
        }
    }
    render() {
        const { names } = this.state;
        return(
            <div>
                {names.map(name => (
                <Total key={name.id} Name={name} />
                ))};
            </div>
        )
    }
}

src/ponent/Total.js file

import React, { Component } from 'react';

export default class Total extends Component {
    render() {
        const { id} = this.props.Name;
        return(
            <div>
                {id}
            </div>
        )
    }
}

src/App.js file

import React from 'react';
import './App.css';
import Footer from './ponent/Footer';
import Detail from './ponent/Page_ความเป็นมา/Detail';

function App() {
  return (
    <div className="App">
      {/* <Navbar /> */}
      {/* <Body /> */}
      <Detail />
      {/* <Detail_Home /> */}
      <Footer />
    </div>
  );
}

export default App;

Could you pleases helping me fix in this problem.

TypeError: Cannot destructure property 'id' of 'this.props.Name' as it is undefined.

src/ponent/Detail.js file

import React, { Component } from 'react';
import { Character } from './Data_Character/Character';
import Total from './Total';

export default class Detail extends Component {
    constructor(props) {
        super(props);

        this.state = {
            names: Character
        }
    }
    render() {
        const { names } = this.state;
        return(
            <div>
                {names.map(name => (
                <Total key={name.id} Name={name} />
                ))};
            </div>
        )
    }
}

src/ponent/Total.js file

import React, { Component } from 'react';

export default class Total extends Component {
    render() {
        const { id} = this.props.Name;
        return(
            <div>
                {id}
            </div>
        )
    }
}

src/App.js file

import React from 'react';
import './App.css';
import Footer from './ponent/Footer';
import Detail from './ponent/Page_ความเป็นมา/Detail';

function App() {
  return (
    <div className="App">
      {/* <Navbar /> */}
      {/* <Body /> */}
      <Detail />
      {/* <Detail_Home /> */}
      <Footer />
    </div>
  );
}

export default App;
  • javascript
  • reactjs
Share Improve this question edited Oct 3, 2020 at 8:06 Dominik 6,3339 gold badges43 silver badges62 bronze badges asked Oct 3, 2020 at 8:00 Akarachai SaeteawAkarachai Saeteaw 231 silver badge3 bronze badges 0
Add a ment  | 

4 Answers 4

Reset to default 3

Provide a default value, or object, to destructure from const { id } = this.props.Name || {};.

This is even simpler if you convert your Total ponent to a functional ponent.

const Total = ({ Name: { id } = {} }) => <div>{id}</div>;

Most likely its because Character doesn't have an id field.

You are passing the contents of Character all the way through (via Name props), but the contents of Character must be omitting id.

You are iterating through the data received from 'Character' object. To do what you do, check if your 'Character' object is in the below format

Character = [{id: 'id1', name: 'Mark'}, {id: 'id2', name: 'John'}]

Character that you are importing in Detail.js must not having id as its property. Check that part or post Character's structure.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745201841a290100.html
最新回复(0)