Question

您能帮助我解决此问题吗？

TypeError：无法解构“ this.props.Name”的属性“ id”，因为该属性未定义。

enter image description here

src / component / Detail.js文件

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 / component / Total.js文件

import React, { Component } from 'react';

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

src / App.js文件

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

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

export default App;

Answer 1

很可能是因为Character没有id字段。

Character的内容一直通过（通过Name道具）传递，但是Character的内容必须省略id。

Answer 2

您正在遍历从“字符”对象接收的数据。要执行操作，请检查您的“字符”对象是否采用以下格式

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

Answer 3

您要在Character中导入的

Detail.js不能具有id作为其属性。检查该部分或张贴角色的结构。

Answer 4

提供默认值或对象，以从const { id } = this.props.Name || {};进行破坏。

如果将Total组件转换为功能组件，则更为简单。

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

TypeError：无法解构“ this.props.Name”的属性“ id”，因为它是未定义的。在ReactJS中

4 个答案: