मैंने उदाहरण दिया जहां मेरी प्रतिक्रिया एपीआई से डेटा प्राप्त करती है।

मेरे पास निम्नलिखित मॉकअप है

  • वस्तुओं की सूची -- वस्तु --- क्षेत्र का चयन करें

यह मेरी ऑर्डर्सलिस्ट है।जेएसएक्स

import React from 'react';
import Order from './Order';

class OrdersList extends React.Component {

  constructor(props) {
    super(props)
    this.state = { data: [] }
  }
  componentDidMount() {

    $.ajax({
      url: '/api/v1/orders',
      success: data => this.setState({ data: data }),
      error: error => console.log(error)
    })
  }

  render() {
    return (
      <div className="row">
        <div className="col s12">
          <table className="floatThead bordered highlight">
            <thead>
              <tr>
                <th>id</th>
                <th>status</th>
              </tr>
            </thead>
            <Order data = { this.state.data } />
          </table>
        </div>
      </div>
    )
  }

}

export default OrdersList;

यहां मेरा ऑर्डर है। जेएसएक्स (इसमें आइटम की सूची और आइटमस्टैटस है)

import React from 'react'

class OrderStatus extends React.Component {
  constructor(props) {
    super(props)
    this.state = { data: [] }
  }

  handleChange(event) {
    let data = {
      order: {
        status: event.target.value
      }
    }
    console.log(event)
    $.ajax({
      method: 'PUT',
      url: `/api/v1/orders/${event.target.id}`,
      data: data,
      success: data => (console.log(data), this.setState({ data: data })),
      error: error => console.log(error)
    })

  }
  render() {

    return (
      <div className="row">
        <div className="input-field">
          <p>status: {this.props.data.status}</p>
          <select value={ this.props.data.status } id={ this.props.data.id } onChange={ this.handleChange } className="browser-default" >
            <option value='neworder'>new</option>
            <option value='pendingorder'>pending</option>
            <option value='sentorder'>sent</option>
            <option value='completedorder'>done</option>
          </select>
        </div>
      </div>
    )
  }
}

class Order extends React.Component {
  constructor(props) {
    super(props)
    this.state = { data: [] }
  }

  render() {
    return (
      <tbody>
        {
          this.props.data.map(
            order =>
            <tr key={order.id}>
              <td>
                # {order.id}
              </td>
              <td>
                <OrderStatus data={ order } />
              </td>
            </tr>
          )
        }
      </tbody>
    )
  }
}

export default Order;

जो मैं समझ नहीं पा रहा हूं वह यह है कि AJAX कॉलबैक पर मेरी आइटम स्थिति को कैसे अपडेट किया जाए (बैकएंड में अपडेट है, यह ठीक काम करता है, लेकिन मैप फ़ंक्शन द्वारा सूचीबद्ध चाइल्ड आइटम पर मेरी स्थिति स्थिति को कैसे अपडेट करें) .. सराहना करें आपके इनपुट के लिए!

0
Evgeny 11 मई 2016, 10:05
मेरा AJAX कॉलबैक कहता है - "अनकॉट टाइप एरर: अपरिभाषित की संपत्ति 'सेटस्टेट' नहीं पढ़ सकता"।
 – 
Evgeny
11 मई 2016, 10:06

1 उत्तर

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

आपका कोड ठीक दिखता है, आप बस एक बाइंड स्टेटमेंट खो रहे हैं।

अपने कंस्ट्रक्टर में निम्नलिखित जोड़ें और इसे काम करना चाहिए:

this.handleChange = this.handleChange.bind(this);

संदर्भ के लिए इस लिंक की जांच करें।

1
Lars Graubner 11 मई 2016, 10:09
धन्यवाद! मैं कुछ बदला हुआ देख सकता हूँ.. हालाँकि मेरी

स्थिति: {this.props.data.status}

कभी भी इसे स्वयं अपडेट क्यों नहीं करती (जब तक कि मैं पृष्ठ F5 को पुनः लोड नहीं करता) ? मुझे अब कंसोल में त्रुटियां नहीं दिख रही हैं..
 – 
Evgeny
11 मई 2016, 10:13
आप चाइल्ड कंपोनेंट्स स्टेट को अपडेट कर रहे हैं, इसलिए इसे फिर से रेंडर किया जाता है। मूल घटक अपडेट नहीं किया जाएगा क्योंकि आप स्थिति को संशोधित नहीं करते हैं। बच्चे से मूल स्थिति को संशोधित करने के लिए आपको बच्चे को एक फ़ंक्शन पास करना होगा। फ़ंक्शन को मूल स्थिति को अपडेट करना चाहिए और बच्चे से बुलाया जाना चाहिए। कुछ इस तरह: this.props.updateParent();
 – 
Lars Graubner
11 मई 2016, 11:29
आपने मेरा दिन सर ग्रुबनेर कर दिया! अपने इनपुट की सराहना करें। मैं केवल कुछ चीजों को स्पष्ट करना चाहता हूं जो मैंने किया है और यदि संभव हो तो मुझे सुधारें यदि यह सर्वोत्तम अभ्यास नहीं है। मैंने पैरेंट आइटम में फ़ंक्शन जोड़ा है जो मेरे घटकडिडमाउंट जैसा ही है (AJAX को कॉल करता है और मेरे इंडेक्स पेज डेटा के लिए स्थिति सेट करता है)। मेरे बच्चे में चेंज कॉलबैक में मैंने इसे रखा। this.updateParent.bind(यह))
 – 
Evgeny
11 मई 2016, 20:14
और जब इसे चाइल्ड कंपोनेंट (यानी <ऑर्डर डेटा = {this.state.data} updateParent = {this.updateParent} /> कहा जाता है, तो माता-पिता से बच्चे को पास कर दिया जाता है।
 – 
Evgeny
11 मई 2016, 20:16
यह सबसे अच्छा अभ्यास है? मैंने आपके उत्तर को उत्तर के रूप में जांच लिया है।
 – 
Evgeny
11 मई 2016, 20:16