Невозможно использовать реквизиты для запроса API в реакции js

У меня есть компонент Restaurants, который отвечает за перечисление ресторанов из API Zomato Dev. Я передал Category и City из других компонентов в компонент Restaurants.

Я открываю компонент Restaurants с кодом ниже:

this.props.history.push(
        {
            pathname : '/restaurants', 
            valueCategory : this.props.location.valueA,  // CATEGORY
            valueCity : this.state.cities[index] // CITY
        });

Я хочу использовать эти valueCategory и valueCity при вызове /search API.

Код :

class Restaurants extends React.Component {

constructor(props) {
    super(props);
    this.componentDidMount = this.componentDidMount.bind(this);
    this.getRestaurants = this.getRestaurants.bind(this);
}

componentDidMount() {
    // I AM GETTING ERROR 'TypeError: Cannot read property 'name' of undefined' ON THIS LINE
    console.log("Component Did Mount Restaurant : " + this.props.location.valueCity.name);
}

 componentDidUpdate(prevProps, prevState, snapshot){
    console.log("Component Did Update :", prevProps); 
    //THIS PRINTS prevProps, WHICH CONTAINS valueCity and valueCategory but I am unable to access them
    return false;
}

render() {
    let category, city;
    category = '';
    city = '';

    if(!isUndefined(this.props.location.valueCategory)) {
        category = <p>You selected Category as : {this.props.location.valueCategory.categories.name}</p>;
    }

    if(!isUndefined(this.props.location.valueCity)) {
    // STRANGLY, THIS LINE WORKS FINE! WHEN I AM ACCESSING valueCity.name
        city = <p>You selected City as : {this.props.location.valueCity.name}</p>;
    }

    console.log(this.props.location);
    return (
        <div> 
            {category}
            {city}
        </div>
    );
}
}

введите здесь описание изображения

Мой вопрос:

  • Я могу получить доступ к {this.props.location.valueCity.name} в методе render()
  • Но я не могу получить доступ к тому же в componentDidMount() или любым другим способом? у меня сбой

TypeError: Невозможно прочитать имя свойства неопределенного


person Kushal    schedule 10.12.2019    source источник
comment
Доступно ли ваше местоположение прямо при рендеринге или оно извлекается?   -  person Maciej Trojniarz    schedule 10.12.2019
comment
componentDidMount будет вызываться сразу после первого рендеринга. Возможно, вашей сети требуется некоторое время для загрузки данных... но вы пытаетесь получить доступ к данным, которые являются результатом вызова API, верно?... Попробуйте добавить проверку перед доступом к свойству объекта. Например: const { location = {} } = this.props; const {valueCity = {} } = местоположение || {}; const {name = {}} = valueCity || {}. или вы можете использовать lodash get   -  person Rajesh Kumaran    schedule 10.12.2019
comment
@RajeshKumaran Нет, я не пытаюсь получить доступ к результатам API. Я пытаюсь получить доступ к props, переданному из компонента верхнего уровня. Я до сих пор не вызывал API.   -  person Kushal    schedule 10.12.2019
comment
Расположение @MaciejTrojniarz доступно в методе render()   -  person Kushal    schedule 10.12.2019
comment
ошибка связана с тем, что в вашем реквизите нет ключа с именем valueCity внутри местоположения.   -  person Rajesh Kumaran    schedule 10.12.2019
comment
можете ли вы распечатать реквизиты внутри componentDidMount и проверить, есть ли у вас valueCity внутри реквизита местоположения   -  person Rajesh Kumaran    schedule 10.12.2019
comment
Когда я добавил console.log("Component Did Mount Restaurant : " + this.props); в componentDidMount(), он печатает Component Did Mount Restaurant : [object Object]   -  person Kushal    schedule 10.12.2019


Ответы (1)


Вы пробовали метод жизненного цикла componentDidUpdate? сравните реквизиты, поступающие в этот метод

        this.state={
        valueCategory:"",
        valueCity:"" //you can chose any data type, 
        checker:true  
        }

        this.stateUpdater(prevProps){
           let valueCategory={this.props};
           let valueCity={this.props};

           if(this.props.valueCategory===undefined){/*check the data  
           what is incoming and use condition accrodingly*/ 

           this.setState({valueCategory:prevProps.location.valueCategory
           ,checker:false})
           }else{
             //no update
              this.setState({checker:false})
            }
        componentDidUpdate(prevProps, prevState, snapshot){
           console.log("see the props",prevProps,this.props);
           if(this.state.checker)              
              this.stateUpdater(prevProps);
           else{
              console.log("do nothing") 
           }
           return false;
       }

**проверьте и дайте мне знать

person warmachine    schedule 10.12.2019
comment
Но поместите туда условие, иначе он будет продолжать устанавливать состояние, продолжайте кодировать - person warmachine; 10.12.2019
comment
Вы можете сделать снимок экрана с выводом? - person warmachine; 10.12.2019
comment
По сути, этот метод жизненного цикла в настоящее время не вызывается для меня. - person Kushal; 10.12.2019
comment
не могли бы вы поделиться обновленным кодом компонента, пожалуйста? с этим методом - person warmachine; 10.12.2019
comment
Я обновил вопрос, а также опубликовал скриншот. Пожалуйста, посмотрите - person Kushal; 10.12.2019
comment
Я обновляю свой ответ идеей, дайте мне знать, работает это или нет, но мы должны использовать состояние, проверьте один раз. - person warmachine; 10.12.2019
comment
В строке this.setState({valueCategory:prevProps.location.valueCategory.name ,checker:false}) выдает ту же ошибку, не удается прочитать свойство 'name' - person Kushal; 11.12.2019
comment
согласно скриншоту, вы получаете prevProps внутри componentDidUpdate, я не понимаю, почему вы не можете передать это этой функции - person warmachine; 11.12.2019
comment
Да, он был напечатан в консоли без каких-либо проблем. Но я не могу получить к нему доступ. - person Kushal; 11.12.2019
comment
вы не можете получить доступ к prevProps за пределами componentDidUpdate, поэтому вам нужно перейти к этой функции и преобразовать ее в состояние, а затем использовать данные состояния в вашем компоненте - person warmachine; 11.12.2019
comment
После передачи реквизита я получил параметр prevProp в функции stateUpdater(prevProp), но не получил доступа. Ваш опубликованный код не будет работать, если вы передадите что-либо в props.location в этом компоненте - person Kushal; 11.12.2019
comment
эй, извините, я не написал местоположение в коде, например, prevProps.location.valueCategory, я обновил ответ, мой плохой!! - person warmachine; 11.12.2019
comment
Эй, ты запустил свой код? Это даст ошибку доступа в location.valueCategory.name - person Kushal; 11.12.2019
comment
не могли бы вы опубликовать эту ошибку, извините, братан, это занимает больше времени, чем ожидалось - person warmachine; 11.12.2019