मैं वर्तमान में सीख रहा हूं कि react.js में वेबपेज के फ्रंट एंड को कैसे कोड किया जाए और असाइनमेंट को पूरा करने के लिए, जब कोई उपयोगकर्ता कुछ भी दर्ज करता है, तो मुझे कैम्पग्राउंड नहीं मिला कहते हुए एक संदेश वापस करना होगा। खोज बार में जो मेरे database में नहीं है।

उदाहरण के लिए:

यदि वे वास्तविक campground name के बजाय केला टाइप करते हैं, तो उसे संदेश प्रदर्शित करना होगा। मुझे यकीन है कि यह अपेक्षाकृत सरल है मैं इस बिंदु पर पूरी तरह से नुकसान में हूं।

मेरी find.js फ़ाइल का कोड नीचे दिया गया है:

import Layout from '../components/MyLayout.js';
import React from "react";
import {getInfo} from '../lib/utils.js';

class Find extends React.Component {
  constructor(props) {
    super(props);
    this.state={search: ""};
  }

  handleUpdate(evt){
    this.setState({search: evt.target.value});
  }

  async handleSearch(evt){
    const park = await getInfo(this.state.search);
    this.setState({park});
  }

render() {
  return (
    <Layout>
    <div style={{ margin: "auto auto", width: "600px", textAlign: "center" }}>
        <h1>New Mexico Camground Search</h1>
        <p><input type='text' value={this.state.search} onChange={this.handleUpdate.bind(this)}/></p>
        <div className="button-style" onClick={this.handleSearch.bind(this)}>Submit</div>
        {this.state.park ? <div>
        <br />
        <h3>{this.state.park.name}</h3> 
            <br /><img style={{maxWidth: '400px', maxHeight: "400px"}}
            src={this.state.park.image_url} /> <br />
            <h3>{this.state.park.closest_town}</h3>
            <p>{this.state.park.description} </p>
          </div> : null}
      <style jsx>{`
        h1,
        a {
          font-family: 'Sans';
          color: #ffa500;
        }
        h2,
        a {
            font-family: 'Sans'
            color: #ffa500;
        }
        .button-style {
            margin: auto auto;
            cursor: pointer;
            background-color: #ffa500;
            color: #ffffff;
            width: 100px;
            font-family: "Sans";
        }
        ul {
          padding: 10;
        }
        li {
          list-style: none;
          margin: 5px 0;
        }
        a {
          text-decoration: none;
          color: blue;
        }
        a:hover {
          opacity: 0.6;
        }
      `}</style>
      </div>
    </Layout>
      )
  }
    }
}

export default Find;
1
Ryan Kohl 26 नवम्बर 2019, 17:39

1 उत्तर

आप इसे try/catch के साथ कर सकते हैं

async handleSearch(evt) {
  try { 
    const park = await getInfo(evt.target.value);
    this.setState({park});
  } catch(error) {
    // do something with error
  }
}

(आप सीधे लक्ष्य मान का भी उपयोग कर सकते हैं)

0
dw_ 26 नवम्बर 2019, 17:42