Блог

Главная - Вопросы по программированию - Ошибка типа: невозможно уничтожить свойство ‘id’ из ‘this.props.Name «поскольку это не определено. В ReactJS

Ошибка типа: невозможно уничтожить свойство ‘id’ из ‘this.props.Name «поскольку это не определено. В ReactJS

#javascript #reactjs

#javascript #reactjs

Вопрос:

Не могли бы вы помочь мне решить эту проблему.

Ошибка типа: невозможно уничтожить свойство ‘id’ из ‘this.props.Name «поскольку это не определено.

введите описание изображения здесь

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;

Ответ №1:

Укажите значение по умолчанию или объект для деструктурирования const { id } = this.props.Name || {}; .

Это еще проще, если вы преобразуете свой Total компонент в функциональный компонент.

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

Ответ №2:

Скорее всего, это потому Character , что у него нет id поля.

Вы передаете содержимое Character полностью (через реквизит Name), но содержимое символа должно пропускать id.

Ответ №3:

Вы перебираете данные, полученные от объекта ‘Character’. Чтобы сделать то, что вы делаете, проверьте, находится ли ваш объект ‘Character’ в приведенном ниже формате

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

Ответ №4:

Character то, что вы импортируете Detail.js , не должно id быть его свойством. Проверьте структуру этой части или символа post.