मैं प्रतिक्रिया करने के लिए नौसिखिया हूं, मैं create-react-app पैकेज और एक्सप्रेस जनरेटर का उपयोग कर रहा हूं। मैं अपरिभाषित संपत्ति के कारण प्रतिक्रिया घटक को प्रस्तुत करने में सक्षम नहीं हो सकता, जिसे मैं यह समझने के लिए नहीं देख सकता कि यह अपरिभाषित क्यों है? यहाँ मेरा कोड है:

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();

ऐप.जेएस

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 | );

मदद के लिए सभी का धन्यवाद

0
Barak Bensimhon 26 सितंबर 2020, 12:28

2 जवाब

सबसे बढ़िया उत्तर

आप उपयोग करना चाहते हैं:

{this.state.apiResponse}

संपादित करें: मैंने देखा है कि आप पेज सामग्री वर्ग का उदाहरण बनाने के बाद सीधे ऐप विधि को प्रस्तुत कर रहे हैं। आपको ऐसा करने की आवश्यकता नहीं है। आप बस App() विधि का नाम बदलकर render() कर सकते हैं, फिर const pageContent = new PageContent(); को हटा सकते हैं और फिर आप <pageContent.App /> के बजाय <PageContent /> को रेंडर कर सकते हैं।

1
Dean James 26 सितंबर 2020, 12:53

आप 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>
      );
    }
}

इसके बाद इस पेज सामग्री को अपने 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
Mrigank Shekhar Shringi 26 सितंबर 2020, 13:01