Проблема с обновлением времени для состояния в React Component (требуется 2 щелчка вместо 1) - PullRequest
Новая
       30

Проблема с обновлением времени для состояния в React Component (требуется 2 щелчка вместо 1)

0 голосов
/ 30 апреля 2020

Я работаю над сольным проектом с использованием React, и я застрял на чем-то последние 2 дня ... Я начинаю, и я очень новичок, так что, может быть, это что-то очень простое c, но я ' m poggling ...

Чтобы попытаться быть кратким и понятным:

У меня есть компонент searchBar, который выполняет поиск в локальной базе данных и возвращает объекты, связанные с ключевым словом поиска. Пока ничего сложного. Каждый визуализированный объект имеет кнопку, которая вызывает функцию onClick. Указанная функция определена в моем компоненте приложения и выглядит следующим образом: 

changeState(term){
    let idToRender=[];
    this.state.dealersDb.map(dealer=>{
    if(term===dealer.id){
        idToRender=[dealer];
        }});
    let recoToFind=idToRender[0].reco;
    recoToFind.map(item=>{
        Discogs.search(item).then(response=>{idToRender[0].recoInfo.push(response)})
    })

    this.setState({
    objectToRender: idToRender
    });

, чтобы объяснить вышеприведенный код, что он делает в первую очередь, идентифицирует, на какой кнопке объекта была нажата кнопка, и отправляет указанный объект. к переменной с именем idToRender. Затем он принимает состояние reco этого объекта и сохраняет его в другой переменной с именем recoToFind. Затем он вызывает метод map () для recoToFind, делает запрос API (метод discogs ()) для каждого элемента массива recoToFind и возвращает pu sh () в состояние recoInfo idToRender. Таким образом, к концу функции idToRender должен выглядеть следующим образом: [{…… recoInfo: [{результат вызова 1stAPI}, {результат вызова 2ndAPI}…]}],

Массив содержит 1 объект наличие всех состояний объекта, на котором изначально был выполнен щелчок, плюс состояние recoInfo, равное массиву, составленному из результатов нескольких вызовов API. Наконец, он обновляет состояние компонента objectToRender до idToRender.

И здесь моя проблема заключается в том, что при помощи onClick я получаю все значения состояний объекта, по которому щелкнули мышью, который отображается на экране (как и ожидалось, с помощью того, как я кодировал вложенные компоненты), НО, значения recoInfo не отображаются должным образом (компонент, который должен отображать эти значения, вложен в компонент, отображающий значения других состояний объекта, по которым щелкнули). Тем не менее, они отображаются правильно после второго нажатия на кнопку. Так что, похоже, моя проблема сводится к проблеме синхронизации обновления состояния, но я озадачен, потому что эта функция вызывает setState один раз, и я точно знаю, что состояние обновляется, потому что, когда я нажимаю на кнопку, нажал на объект отображаются детали, но каким-то образом только состояние recoInfo, по-видимому, еще не доступно, а становится доступным только при втором щелчке ...

У кого-нибудь есть способ решить эту проблему? :( Мне почему-то кажется, что мое спасение заключается в асинхронности / ожидании, но я не уверен, что правильно их понимаю ...

Заранее большое спасибо за любую помощь!

1 Ответ

0 голосов
/ 30 апреля 2020

Это что-то, что вы хотите сделать? 

changeState(term) {
let idToRender=[];
this.state.dealersDb.map(dealer=>{
if(term===dealer.id){
    idToRender=[dealer];
    }});
let recoToFind=idToRender[0].reco;
recoToFind.map(item=>{
    Discogs.search(item).then(response=>{
        idToRender[0].recoInfo.push(response)
        this.setState({
            objectToRender: idToRender
        });
    })
})

}

вы можете вызвать setState после асинхронного вызова c и получения результата.

...