प्रतिक्रिया जेएस का उपयोग कर वेब पेज पर प्रदर्शित होने वाले अक्षरों से लौटाए गए डेटा तक मैं कैसे पहुंचूं?

Question

मेरे पास एपीआई में एजेक्स फ़ंक्शन हैं जिनके लिए मैं अक्षरों को अपने प्रतिक्रिया जेएस घटक से अनुरोध प्राप्त कर रहा हूं। मैं इसे वापस किए गए डेटा को वेब पेज पर प्रदर्शित करने के लिए कैसे एक्सेस कर सकता हूं।

Answer 1

आप जो करने की कोशिश कर रहे हैं उसके आधार पर यह एक उदाहरण है। यदि आप प्रतिक्रिया रूटर का उपयोग कर रूटर से onEnter एपीआई के साथ ajax कॉल करने के लिए

componentDidMount() { 
    axios 
    .get(`endpoint`) 
    .then(res => this.setState({ posts: res.data })) 
    .catch(err => console.log(err)) 
} 

एक अच्छा तरीका भी होना चाहिए।

Answer 2

यहां रिएक्ट और ES2015 के साथ ऐसा करने का एक तरीका है। आप कन्स्ट्रक्टर में डिफ़ॉल्ट स्थिति सेट करना चाहते हैं और नीचे दिए गए उदाहरण में अपना अनुरोध प्राप्त करना चाहते हैं। बस अपने आवेदन के साथ काम करने के लिए नामों को चारों ओर स्विच करें। फिर सरणी पर नक्शा आप अनुरोध प्राप्त करने की प्रतिक्रिया से वापस आते हैं। निश्चित रूप से अपनी जरूरतों के अनुसार नाम और स्टाइलिंग को बदलें, मैं चीजों को समझने में आसान बनाने के लिए बूटस्ट्रैप का उपयोग कर रहा हूं। उम्मीद है की यह मदद करेगा।

import React, { Component } from 'react' 
    import axios from 'axios'; 
    import cookie from 'react-cookie'; 
    import { Modal,Button } from 'react-bootstrap' 
    import { API_URL, CLIENT_ROOT_URL, errorHandler } from '../../actions/index'; 

    class NameofClass extends Component { 

     constructor(props) { 
     super(props) 

     this.state = { 
      classrooms: [], 
      profile: {country: '', firstName: '', lastName: '', gravatar: '', organization: ''} 
     } 
     } 
     componentDidMount(){ 
     const authorization = "Some Name" + cookie.load('token').replace("JWT","") 
      axios.get(`${API_URL}/your/endpoint`, { 
      headers: { 'Authorization': authorization } 
      }) 
      .then(response => { 
      this.setState({ 
       classrooms:response.data.classrooms, 
       profile:response.data.profile 
      }) 
      }) 
      .then(response => { 
      this.setState({classrooms: response.data.profile}) 
      }) 
      .catch((error) => { 
      console.log("error",error) 
      }) 
     } 
     render() { 
     return (
      <div className='container'> 
      <div className='jumbotron'> 
       <h1>NameofClass Page</h1> 
       <p>Welcome {this.state.profile.firstName} {this.state.profile.lastName}</p> 
      </div> 
      <div className='well'> 
       { 
       this.state.classrooms.map((room) => { 
        return (
         <div> 
         <p>{room.name}</p> 
         </div> 
        ) 
       }) 
       } 
      </div> 
      </div> 
     ) 
     } 
    } 

    export default NameofClass