मैं एक MongoDB सर्वर के साथ एक नोड एपीआई पर एक GET अनुरोध भेज रहा हूँ। मुझे ऑब्जेक्ट प्रारूप की एक सरणी में JSON के रूप में प्रतिक्रिया मिल रही है। मैं उन सभी परिणामों को एक सूची में दिखाना चाहता हूं। अभी मैं इस तरह का फंक्शन बना रहा हूं

class VendorDashboard extends React.Component {
    constructor() {
      super();

      this.state = {

        paginationValue: '86',
        title: ""
      }

      this.handleLogout = this.handleLogout.bind(this);
      this.gotoCourse = this.gotoCourse.bind(this);
    }
    componentDidMount() {
        axios.get('/vendor/showcourses') //the api to hit request
          .then((response) => {
            console.log(response);
            let course = [];
            course = response.data.map((courseres) => {
              this.setState({
                title: courseres.title
              });
            })
          });

अभी जो हो रहा है वह सिर्फ एक परिणाम दिखा रहा है। मैं उस एपीआई पर सभी परिणाम दिखाना चाहता हूं। मैं यह कैसे कर सकता हूं?

0
Barry Bonds 29 मार्च 2018, 10:48

3 जवाब

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

आपको सभी सर्वर प्रतिक्रिया एकत्र करने और इसे राज्य में डेटा की एक सरणी के रूप में सेट करने और प्रस्तुत करने के लिए इस राज्य डेटा का उपयोग करने की आवश्यकता है:

class VendorDashboard extends React.Component {
    constructor() {
        super();

        this.state = {
            paginationValue: '86',
            course: []
        }

        this.handleLogout = this.handleLogout.bind(this);
        this.gotoCourse = this.gotoCourse.bind(this);
    }

    componentDidMount() {
        axios.get('/vendor/showcourses') //the api to hit request
            .then((response) => {
                const course = response.data.map((courseres) => ({
                    id: courseres.id,
                    title: courseres.title
                }));

                this.setState({
                    course
                });
            });
    }

    render() {
        return (
            <ul>
                {
                    this.state.course.map((eachCourse) => {
                        return <li key={eachCourse.id}>{eachCourse.title}</li>
                    })
                }
            </ul>
        )
    }
}
1
Vijay Dev 29 मार्च 2018, 08:05

प्रत्येक मानचित्र पुनरावृत्ति में आप अपने राज्य के टुकड़े को फिर से लिखते हैं, यह गलत है। बस अपने राज्य में पाठ्यक्रम डालें:

        console.log(response);
        this.setState({ courses: response.data });

रेंडर विधि में अपने state.courses से गुजरें:

render(){
  return(
   <div>
    {this.state.courses.map(course => <h2>{course.title}</h2>)}
   </div>
  );
}
0
Artem Mirchenko 29 मार्च 2018, 08:00

यहां यह खंड प्रति पाठ्यक्रम शीर्षक को ओवरराइड कर रहा है।

course = response.data.map((courseres) => {
          this.setState({
            title: courseres.title
          });
        })

आप राज्य को शीर्षकों की एक सरणी के रूप में रख सकते हैं और कर सकते हैं;

course = response.data.map((courseres) => {
          return courseres.title;
        })

this.setState({titles: course});

और फिर आप अपने घटक में शीर्षकों की सरणी पर दोहरा सकते हैं। जैसे रेंडर विधि में;

const { titles } = this.state;
return <div>{titles.map((title, index) => <div key={index}>{title}</div>)}</div>
2
Tom Johnson 29 मार्च 2018, 07:56