Реакция рендеринга - невозможно получить доступ к данным массива из-за времени - PullRequest
Новая
       10

Реакция рендеринга - невозможно получить доступ к данным массива из-за времени

0 голосов
/ 15 декабря 2018

У меня есть функция, которая требует времени для извлечения данных.Когда рендеринг возвращается в первый раз, данные this.state недоступны, поэтому, основываясь на множестве других вопросов, подобных этому, я пытаюсь использовать троичный файл и выполнить повторный рендеринг, когда данные будут готовы.Я использую версию обратного вызова setState: 

 this.setState(prevState => ({ comments: [...prevState.comments, top100Resolved ] }))

Когда данные (массив) возвращаются с помощью setState, я не могу получить к ним доступ.Цель состоит в том, чтобы нанести на него карту и протолкнуть его через шаблон, но я даже не могу внести в него индекс.Это рендер. 

render(){
//true once there is some state
   let bool = this.state.comments.length

      return (
        <div className="data">
        {
            bool ? 
    //Want to render markup here
          this.state.commments.map(comment => {
     <div>comment</div>  //nothing happens
      })
           : <div>Not ready</div> 
        }

      </div>)
  }

Сначала появится Not Ready.Но даже если bool истинно и я вернусь [Array(0)], я не могу внести в него индекс.[Array(0)][0] производит [], который является массивом объектов.[Array(0)][0][0] должен быть объектом, но undefined. Таким образом, функция карты в настоящее время невозможна.

https://jsfiddle.net/drumgod/375bzycv/282/

1 Ответ

0 голосов
/ 15 декабря 2018

Неверный способ сопоставления ваших идентификаторов с обещаниями.Все, что вы делаете - это настраиваете обещание, но не дожидаетесь его завершения для каждого идентификатора.Вместо этого используйте Promise.all и отмените весь этап сопоставления обещаний: 

Promise.all(top100Promises.map(id => {
  return this.getStory(id).then(obj => {
    if(obj) {
      if(obj.type === 'comment') {
        return obj
      }
    }
}))
  .then(comments => {
    this.setState(prevState => ({ 
      comments: [...prevState.comments, ...comments.filter(o => o)] // this filter removes non-comments that are undefined 
    }))
  })

Это будет ожидать поступления каждого комментария, прежде чем устанавливать состояние, а не устанавливать состояние, прежде чем оно поступит. Вы также можете сократить свой комментарий.top100Promises код для просто: 

let top100Promises = Array.from({ length: 100 }, (_, i) => maxNum - i)

См. обновленный JSFiddle .

...