मैं एक्सियोस रिएक्ट में कैच वादे के अंदर सेटस्टेट करने की कोशिश कर रहा हूं, यह काम करता है लेकिन मुझे असीमित मात्रा में अनुरोध और 404 त्रुटि मिलती है।

class Search extends Component {
  state = {
    notFound: false,
    dataResult: "",
  };

  componentDidUpdate() {
    axios
      .get("url")
      .then((resp) => {
        this.setState({ dataResult: resp.data });
      })
      .catch((err) => {
        if (err.response.status === 404) {
          this.setState({ notFound: true });
        }
      });
  }

  render() {
    return (
      <div>
        {this.state.notFound ? <div>NOTFOUND</div> : null}
      </div>
    );
  }
}

कंसोल परिणाम (यूआरएल एक एपीआई है):

"यूआरएल" 404 प्राप्त करें (नहीं मिला) "यूआरएल" 404 प्राप्त करें (नहीं मिला) "यूआरएल" 404 प्राप्त करें (नहीं मिला) ...

0
Hashem Mashem 17 सितंबर 2020, 22:35

2 जवाब

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

यदि आपको कुछ इनपुट स्थिति परिवर्तन पर axios को कॉल करने की आवश्यकता है, तो आपको उस कॉल को किसी शर्त के साथ लपेटने की आवश्यकता है ताकि इनपुट स्थिति वास्तव में बदलने पर ही इसे कॉल किया जा सके। componentDidUpdate विधि पिछले राज्य वस्तु के साथ लागू की जाती है। तो आप यह सुनिश्चित करने के लिए पिछले राज्य की वर्तमान स्थिति से तुलना कर सकते हैं कि राज्य वास्तव में बदल गया है।

componentDidUpdate(prevProps, prevState) {
  if(prevState.myInputState !== this.state.myInputState) {
    axios
      .get("url")
      .then((resp) => {
        this.setState({ dataResult: resp.data });
      })
      .catch((err) => {
        if (err.response.status === 404) {
          this.setState({ notFound: true });
        }
      });
  }
}
0
Prakash Sharma 17 सितंबर 2020, 22:51

आप कॉम्पोनेंटडिडअपडेट () में तुरंत सेटस्टेट () को कॉल कर सकते हैं, लेकिन ध्यान दें कि इसे ऊपर के उदाहरण की तरह एक शर्त में लपेटा जाना चाहिए, या आप एक अनंत लूप का कारण बनेंगे।

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.url !== prevProps.url) {
    this.fetchData(this.props.userID);
  }
}
0
Eric 17 सितंबर 2020, 22:50