Question

我有一个API，每次调用该API时都会给我一个随机的位置，并且我希望按钮仅调用该API。

我尝试使用箭头功能和普通功能，但是遇到了另一个错误；我的一般想法是用函数包装fetching方法，然后调用此函数两次，第一次调用是在渲染组件之前，第二次调用此按钮。

这些是我的尝试：

（注意：我的越野车功能是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>
   );
 }
}

这是我得到的错误


  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

您的handleOnClick是局部函数，只能从componentDidMount内部调用。为了能够从类内部的任何地方调用它，请使用方法。也许这个名字应该比它实际完成的任务更具描述性，例如loadShop：

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

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

然后您可以在班级内的任何地方以this.loadShop()的形式调用它，例如

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

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

1 个答案: