नौसिखिया यहाँ प्रतिक्रिया करें। मैं बटन क्लिक पर मात्रा मान घटाने की कोशिश कर रहा हूं। जब मैं बटन पर क्लिक करता हूं तो मुझे सभी बटनों के बगल में प्रदर्शित एक NaN मान दिखाई देता है। मैं NaN त्रुटि से कैसे बच सकता हूँ? मैं यहां क्या गलती कर रहा हूं और मैं व्यक्तिगत रूप से बटनों पर मूल्यों को कैसे अपडेट करूं? धन्यवाद। डेटा और कोड इस प्रकार है। यहां छवि विवरण दर्ज करें

{
    "id": 1,
    "title": "Python Crash Course",
    "author": "Eric Matthes",
    "quantity": 5
  },
  {
    "id": 2,
    "title": "Head-First Python",
    "author": "Paul Barry",
    "quantity": 2
  },
  {
    "id": 3,
    "title": "Invent Your Own Computer Games with Python",
    "author": "Al Sweigart",
    "quantity": 1
  }

नीचे मेरा रिएक्ट कोड है।

class BooksComponent extends Component{

    constructor(){
        super()
        this.state ={
            booksData: []
        }
        this.reserve = this.reserve.bind(this)
    }
    
    componentDidMount() {
        axios.get('/library')
          .then(res => {
            const booksData = res.data
            this.setState({ booksData })
          })
    }
    
    render() {
        return (
          <div className="App">
            {this.state.booksData.map(book => {
                const {id, title, author, quantity} = book
                return (
                  <div>
                  <p>{id} - {title} - {author}</p>
                  <button onClick={this.reserve}>Reserve {quantity}</button>
                  <span>{this.state.quantity}</span>
                </div>
                );
            })
            }
          </div>
        )
    }

    reserve(){
        console.log('Reserved')
        this.setState({
            quantity: this.state.booksData.quantity-1
        }
        )
        console.log(this.state)
    }
}



export default BooksComponent
2
blackPanther 13 जुलाई 2020, 05:19

2 जवाब

समस्या रिजर्व funciton में है।

this.state.booksData.quantity - 1 

this.state.booksData एक सरणी है और उचित मात्रा तक पहुंच संभव नहीं है।

this.state.booksData.quantity undefined है

undefined - number = NaN

आपको बुकडेटा आइटम की आईडी द्वारा सरणी को फ़िल्टर करने की आवश्यकता है, जैसे:

reserve(id) {
    this.setState({
        quantity: this.state.booksData.find(item => item.id === id).quantity - 1
    })
}

और ऑनक्लिक में बुकडाटा आइटम की आईडी पास करें।

मैं बटनों पर मूल्यों को व्यक्तिगत रूप से कैसे अपडेट करूं?

तुम कोशिश कर सकते हो:

reserve(id) {
    this.setState({
        booksData: this.state.booksData.map(item => {
            if (item.id === id) {
                return { ...item, quantity: item.quantity - 1};
            } else {
                return item;
            }
        })
    })
}

और रेंडर में:

<span>{quantity}</span>
2
Nacho Zullo 13 जुलाई 2020, 06:05
1
धन्यवाद। मैंने parseInt का उपयोग करने का प्रयास किया है लेकिन मुझे अभी भी वही त्रुटि दिखाई दे रही है
 – 
blackPanther
13 जुलाई 2020, 05:31
अपडेट किया गया! मैं गलत था जावास्क्रिप्ट स्ट्रिंग को आंतरिक रूप से घटाव में एक इंट के रूप में पार्स करता है
 – 
Nacho Zullo
13 जुलाई 2020, 05:37
आपको उस समय सेटस्टेट विधि बी/सी को अपडेट करने की आवश्यकता हो सकती है जब यह चलता है कि उसका राज्य इस तरह दिखेगा state ={booksData = [], quantity = 1}
 – 
Hyetigran
13 जुलाई 2020, 05:47
शुक्रिया! रेंडर में जब मैं {item.quantity} का उपयोग करता हूं, तो त्रुटि कहती है कि 'आइटम' परिभाषित नहीं है। मैं रेंडर में आइटम को कैसे परिभाषित या पास करूं? आईडी को ऑनक्लिक पर कैसे पास करें?
 – 
blackPanther
13 जुलाई 2020, 06:03
मैं फिर से गलत था :( इसकी {quantity}। और ऑनक्लिक में आप onClick={() => Reserve(id)} कर सकते हैं।
 – 
Nacho Zullo
13 जुलाई 2020, 06:05

आप राज्य इनलाइन को अपडेट कर सकते हैं, नीचे एक उदाहरण दिया गया है:

class BooksComponent extends Component{

    constructor(){
        super()
        this.state ={
            booksData: []
        }
        this.reserve = this.reserve.bind(this)
    }
    
    componentDidMount() {
        axios.get('/library')
          .then(res => {
            const booksData = res.data
            this.setState({ booksData })
          })
    }
    
    render() {
        return (
          <div className="App">
            {this.state.booksData.map(book => {
                const {id, title, author, quantity} = book
                return (
                  <div>
                  <p>{id} - {title} - {author}</p>
                  <button onClick={()=>this.setState({this.state.booksData: this.state.booksData.map(book => book.id === id ? book.quantity - 1 : book)})}>Reserve {quantity}</button>
                  <span>{this.state.quantity}</span>
                </div>
                );
            })
            }
          </div>
        )
    }

}
0
Hyetigran 13 जुलाई 2020, 06:01