Question

im试图使用来自不同组件的状态在一个组件中进行api调用，但是当我在API调用中使用props时，出现错误，提示无法读取未定义的属性props。基本上，我试图使用来自其他组件的数据进行api调用，然后将其显示在主要组件中，但不确定如何执行。有人可以告诉我我做错了什么吗？谢谢您的帮助！

    class App extends Component {
     constructor() {
        super();
        this.state = {
           places2: [] ,
           isLoaded2: true,
           isLoaded: true,
          latitude: 37.774929,
          longitude: -122.419416,

        };

 // this is the data i want to pass 


     geocodeByAddress(address)
            .then(res => getLatLng(res[0]))
            .then(({ lat, lng }) => {
    this.setState({

      latitude: lat,
      longitude: lng,

    });
  })
 .catch(error => {
        this.setState({ isGeocoding: false });
        console.log('error', error); // eslint-disable-line no-console
      });

}

  render() {
    return (
        <div id="h">


          {this.state.isLoaded ? 

        <Health

          latitude={this.state.latitude}
          longitude={this.state.longitude}
          parentMethod={this.parentMethod}
          parentMethod2={this.parentMethod2}
          />

          : <div>.</div>}
        <Map center= {{lat: this.state.latitude, lng: this.state.longitude}}/>

            {this.state.isLoaded ? 




           <div id="location-basic-info" >


          <UserForm 
          address={this.state.address}
          Latitude={this.state.latitude}
          Longitude={this.state.longitude}
          />


         </div> : <div>.</div>}



        {this.state.isLoaded2 ?
         <Health

          latitude={this.state.latitude}
          longitude={this.state.longitude}
          parentMethod={this.parentMethod}
          parentMethod2={this.parentMethod2}
          />


          : <div>.</div>}

          {this.state.isLoaded2 ? 



          <div id="location-basic-info" >


          <div> {this.state.place} {this.state.places2} </div>

        </div> : <div>.</div>}
        </div>


         <div>

        </div>
                </div>

            );
          }
        };

        export default App;

health.js

class Health extends Component {

constructor() {
    super();
    this.state = {
      zoom: 13,
      maptype: 'roadmap',
      place_formatted: '',
      place_id: '',
      place_location: '',
      address: '',
      latitude: 37.774929,
      longitude: -122.419416,
      marker:[],
      places: [], isLoaded: false,
      places2: []
    };
  }

getplace(){
   var param = {
          //this is giving me the error 
                lat:   this.props.latitude,
                long: this.props.longitude,
                temp:1
             }
           axios.post(`http://localhost:5000/search-champ`, {
                                        param

            }).then((data)=>{
                  this.setState({places: data});
                   console.log( this.state.places);
                  console.log(data);

             const places = data.data.data[0].results.slice(0,10).map((place) => { 


                   console.log(place.name)
                   console.log(place.geometry.location.lat)
                   console.log(place.geometry.location.lng)

                  let name = place.name;
                  let vicinity= place.vicinity;

                      return   <div class="col-xs-6 col-sm-6">
                        <ul id="places-list">
               <li><a  onClick={() => this.hello(name, vicinity)}> {place.name} </a> </li>
                        </ul>


                          </div>






            })

            console.log('places', places);
              const places2 =  data.data.data[1].results.slice(0,10).map((place) => { 

                  console.log(place.name)
                   console.log(place.geometry.location.lat)
                   console.log(place.geometry.location.lng)

                  let name = place.name;
                  let vicinity= place.vicinity;

                      return   <div class="col-xs-6 col-sm-6">
                        <ul id="places-list">
                        <li><a  onClick={() => this.hello(name, vicinity)}> {place.name} </a> </li>
                        </ul>


                          </div>

});


                  this.setState({ place: places ,  isLoaded: true});

                  this.setState({ places2: places2 ,  isLoaded: true});



                })










}





   render(){
    return(

<div>


<ul class="nav nav-pills" id="f">
  <li class="active" onClick={this.props.parentMethod}> <a href="#">Info</a></li>
  <li onClick={this.props.parentMethod2}><a href="#">Food</a></li>
  <li onClick={this.getplace}><a href="#">Health</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>




  {this.state.isLoaded2 ? 



  <div id="location-basic-info" >


<div> {this.state.places} {this.state.places2} </div>

</div> : <div>.</div>}
</div> 
);
    }};


    export default Health;

Answer 1

您对api的调用必须在componentDidMount方法中。

componentDidMount：：一旦我们所有的子元素和我们的Component实例都安装到本机UI上，就会调用此方法

简单的生命周期：

    class Example extends React.Component {

        constructor()
        {
            console.log('constructor')
        }

        componentWillMount()
        {
            console.log('Pre-mounting ')
        }
        componentDidMount()
        {
            console.log('Post-mounting ')
            //TODO: call api axios or fetch
        }

        render()
        {
            console.log('render ui')        
            return(....)
        }

    }

我还在您的代码中看到了类似的内容：

render() {
  // BAD: Do not do this!
  this.setState({ place: places ,  isLoaded: true});

  this.setState({ places2: places2 ,  isLoaded: true});
}

编码愉快！

如何使用道具进行API调用

1 个答案: