Блог

Я не могу получить доступ к полному вызову API из родительского компонента в качестве реквизита в дочернем компоненте. Передал выборку через props дочернему компоненту.

т.е. props.housingData.address будет создавать данные в дочернем компоненте, но props.housingData.address не будет. Сообщение об ошибке:

ошибка: «не удается получить доступ к строке undefined».

 ```

    export default class Home extends React.Component {
    ...

    componentDidMount() { 
    
                var settings = {
                    "async": true,
                    "crossDomain": true,
                    "url": 
                    "https://realtor.p.rapidapi.com/properties/v2/list- 
                     for-rent? 
  sort=relevanceamp;city=New York Cityamp;state_code=NYamp;limit=200amp;offset=0",
                    "method": "GET",
                    "headers": {
                        "x-rapidapi-host": "realtor.p.rapidapi.com",
                        "x-rapidapi-key": "API_KEY"
                    }
                }
        $.ajax(settings).done(response =>{
                        
         // Array to apply response iteration to
                            let dataArray = []; 
                           // 

        // **I believe issue is here**
                    for(let i = 0; i < response.properties.length; i  ){
                            let data = response.properties[i]; 
                            this.setState({housingData: data}); 
                            }
            }   
        )
     }

     render() {
        let dataLoaded = this.state.housingData;        
        return ( 
            <div className="container">
                   <Grid container>


  //Conditional to ensure fetch ---> {dataLoaded amp;amp; this.state ?
                        <Property 
                                housingData={this.state.housingData}
                        />
                        : <CircularProgress className="loader" />}

                        
                </Grid>                                   
            </div>
            
             )
         }

     }

     ```
     export default function Property(props){
      ...
      let propData = props.housingData
      const propertyInfo = info.slice(0,showItems).map((info,item)=>(
      <Card className={classes.root} }}>
        <CardActionArea>
                <CardMedia
                component="img"
                alt="Contemplative Reptile"
                height="140"
                // image={propData.photos[item].href}
                image={info.img}
                title="Contemplative Reptile"
                />
                   <CardContent>
                     <Typography gutterBottom variant="h5" component="h2">
                            {info.address}
                      </Typography>
              </CardContent>
     </Card>
            ))
  

Я исправил эту проблему. Пришлось назначить ответ API объекту в родительском компоненте (Home) перед отправкой его дочернему компоненту. (Свойство) Это дополнение к условному набору рендеринга для дочернего компонента гарантирует, что все данные из api были извлечены и назначены реквизитам для использования в дочернем компоненте.

 export default class Home extends React.Component {
  
 ... 
        $.ajax(settings).done(response=>{
            let dataArray = []; <--- // Set new empty array
            for(let i = 0; i < response.properties.length; i  ){
                let obj = {};  <---- // Set Object
                obj = {...response.properties[i]}  <---- // Assigned response to object
                dataArray.push(obj);  <--- // Pushed to new array
            }
            this.setState({housingData: dataArray}); <--- // Send to state
        });