刷新（重新调用）API的“反应”按钮

Question

I have an API that gives me a random location each time I recall the API, and I want the button to just re-call the API.

I tried to use an arrow function and a normal function but I get a different error; my general idea is to wrap the fetching method with a function and then call this function twice, the first call before I render the component and the second call on this button.

These are my attempts:

(Note: my buggy function is handleOnClick )

 state = {
   isLoading: true,
   shop: null, 
   error: null
 };

 componentDidMount() {
   // fix CORB and CORS issues by using proxy
   var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
     targetUrl ='https://wainnakel.com/api/v1/GenerateFS.php?uid=26.2716025,50.2017993&g%20et_param=value';

     function handleOnClick() {
       fetch(proxyUrl + targetUrl)
     .then(res => res.json())
     .then(shop => {
       console.table(shop); // create table in console 
       this.setState({ 
         shop ,
         isLoading:false,
       });
     })
     .catch(e => {
       console.log(e);
     });    
   }

   handleOnClick();
 }


   showLocation = () => {
   var location = `${this.state.shop.lat}%2C%20${this.state.shop.lon}`;
  var gmapurl =`https://maps.google.com/maps?q=${location}&t=&z=17&ie=UTF8&iwloc=&output=embed`;
  return gmapurl;
};



 render() {

   const { isLoading, shop, error } = this.state; //no need to write this.state every time



   let gmapurl ;  //create variable that we will store the new location from the API 

   return (  


     <React.Fragment>
          <Navigation />

     <div> 
     {/* // Display a message if we faced an error */}
     {error ? <p>{error.message}</p> : null} 
     {!isLoading ? ( //   check data if it ready 
     //and take lat and lon from api ,and place it in  embedded google map url
    gmapurl =`https://maps.google.com/maps?q=${this.state.shop.lat}%2C%20${this.state.shop.lon}&t=&z=17&ie=UTF8&iwloc=&output=embed`,

       shop ? (
         <div>

           <h1> {this.state.shop.name}</h1>
        {/* MAP */}  
        <div className="mapouter MapPage"><div className="gmap_canvas">
           <iframe width="768" height="500" id="gmap_canvas" src={gmapurl} 
           frameBorder="0" scrolling="false" marginHeight="0" marginWidth="0">
           </iframe>
           <h1>map veiw</h1></div> 
           </div>


           <button className="btn" onClick={() =>  {handleOnClick}}> <div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>أقتراح آخر</button>

        </div> ) : ( '')
):(      // show loading icon if there is a delay in data
<div> <img src={loadingpic}></img>  </div>
 )
     }
     </div>
     </React.Fragment>
   );
 }
}

and this the error I got

  Line 82:  Expected an assignment or function call and instead saw an expression no-unused-expressions

  Line 82:  'handleOnClick' is not defined  no-undef

Answer 1

Your handleOnClick is a local function, that can only be called from inside componentDidMount . To be able to call it from anywhere inside the class, use a method. Maybe the name should be a bit more descriptive of the task that it actually does, eg loadShop :

 loadShop() {
   this.setState({ isLoading: true });

  fetch(proxyUrl + targetUrl)
    .then(res => res.json())
    .then(shop => {
      console.table(shop);
      this.setState({ 
         shop ,
         isLoading:false,
      });
     });
 }

Then you can call it from anywhere inside the class as this.loadShop() , eg

 <button onClick={() => this.loadShop()} >