Блог

Главная - Вопросы по программированию - Компоненту React не удается выполнить рендеринг из-за неопределенного свойства

Компоненту React не удается выполнить рендеринг из-за неопределенного свойства

#reactjs #express

#reactjs #выразить

Вопрос:

Я новичок в react, я использую пакет create-react-app и экспресс-генератор. Кажется, я не могу отобразить компонент react из-за неопределенного свойства, которое я не вижу, чтобы понять, почему оно не определено? Вот мой код:

index.js

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import PageContent from './App';
import * as serviceWorker from './serviceWorker';

const pageContent = new PageContent();

ReactDOM.render(
  <React.StrictMode>
    <pageContent.App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

App.js

 import React from 'react';
import logo from './logo.svg';
import './App.css';

class PageContent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            apiResponse: 'test test test'
        };
    }

    callAPI() {
        fetch("http://localhost:3127/testAPI")
            .then(res => res.text())
            .then(res => this.setState({ apiResponse: 'hello' }));
    }

    componentWillMount() {
        this.callAPI();
    }

    App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
            <p className="App-intro">**{PageContent.state.apiResponse}</p>
          </header>
        </div>
      );
    }
}

export default PageContent;

Это ошибка, которую я получаю:

 TypeError: Cannot read property 'apiResponse' of undefined

App
src/App.js:39

  36 |       >
  37 |         Learn React
  38 |       </a>
> 39 |       <p className="App-intro">**{PageContent.state.apiResponse}</p>
  40 | ^    </header>
  41 |   </div>
  42 | );

Спасибо всем за помощь

Ответ №1:

Вы хотите использовать:

 {this.state.apiResponse}

Редактировать: я заметил, что вы отображаете метод App непосредственно после создания экземпляра класса PageContent . Вам не нужно этого делать. Вы можете просто переименовать App() метод в be render() , затем удалить const pageContent = new PageContent(); и затем можно выполнить рендеринг <PageContent /> вместо <pageContent.App /> .

Комментарии:

1. К сожалению, я попробовал это и получил эту ошибку: ‘TypeError: не удается прочитать свойство ‘состояние’ неопределенного’

2. О, я вижу, вы напрямую ссылаетесь на метод приложения. Я обновлю свой ответ.

3. Работает как шарм! большое вам спасибо! Не могли бы вы объяснить, почему это не работало раньше, и оно работает сейчас?

4. Когда у вас есть <PageContent /> react, он в основном создает его для вас, потому что это класс. Если у вас есть <pageContent.App /> , это просто функция, и она будет отображаться как функциональный компонент, но с ним не связано состояние.

5. Приятно! Итак, чего мне не хватало, так это того, что react создает экземпляр класса для меня при рендеринге? Или в любом случае?

Ответ №2:

Вы допускаете 2 ошибки —

  1. сначала запишите его как {this.state.apiResponse }

  2. Ваш app.js файл записан неправильно, он должен быть примерно таким

 import React from 'react';
import logo from './logo.svg';
import './App.css';

export default class PageContent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            apiResponse: 'test test test'
        };
    }

    callAPI() {
        fetch("http://localhost:3127/testAPI")
            .then(res => res.text())
            .then(res => this.setState({ apiResponse: 'hello' }));
    }

    componentWillMount() {
        this.callAPI();
    }

    render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
            <p className="App-intro">{this.state.apiResponse}</p>
          </header>
        </div>
      );
    }
}

после этого импортируйте этот PageContent в свой index.js вот так —

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import PageContent from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <PageContent />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

Комментарии:

1. Привет, то же, что я уже отвечал ранее: к сожалению, я попробовал и получил эту ошибку: ‘TypeError: не удается прочитать свойство ‘состояние’ неопределенного’

2. @BarakBensimhon напишите это так. Я отредактировал ответ.