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;
4 Answers
Reset to default 3Provide 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745201804a4616369.html
评论列表（0条）