Реагируйте - Обновлено состояние, не отражающее дочерний компонент - PullRequest
Новая
       37

Реагируйте - Обновлено состояние, не отражающее дочерний компонент

0 голосов
/ 13 октября 2019

РЕДАКТИРОВАТЬ 2:

Узнал, что это может быть достигнуто только через какую-то веб-розетку

Я ошибался в своем понимании, связанном с состоянием.

РЕДАКТИРОВАТЬ:

Теперь я создал коды и ящик для моего приложения. Это должно помочь лучше, так как в нем есть только необходимый код, без лишних.

клиент: https://codesandbox.io/s/client-eek5c

сервер: https://codesandbox.io/s/slideshow-backend-shdp1

Ожидание:

  • Когда я редактирую описание в client / admin, мне бы хотелось, чтобы мои App.js> state> activeSlides обновлялись, поэтому нет необходимости обновлять страницу, чтобы увидеть произошедшее обновление.

Как проверить:

  • Открыть клиент в двух браузерах
  • в браузере 1 перейдите в раздел администратора и отредактируйте описание
  • Ожидается, что браузер 2 покажет последнее описание без обновления

ОРИГИНАЛЬНЫЙ ВОПРОС:

Пожалуйста, не судите код, так как это моя первая попыткадостичь чего-то с помощью React. Пожалуйста, смотрите github link для полной базы кода.

Что я пытаюсь достичь:

src / App.js

  • Принесите активные слайды из base_url и сохраните их в состоянии, называемом ActiveSlides
  • Существует еще одна созданная функция с именем updatedActiveSlides
  • ActiveSlides передается как компонент Props для SlideShow
  • updatedActiveSlides isпередается в качестве реквизитов компоненту администратора

src / components / pages / home / SlideShow.js

  • Получение состояния ActiveSlides в виде реквизитов и его отображение наfront end
  • Ожидается, что когда ActiveSlides изменится в App.js, он должен отражать это изменение без обновления пользователем страницы

src / components / pages / admin / Admin. js

  • Получение функции updateActiveSlides в качестве реквизита
  • Во время метода editSlide вызовите функцию updateActiveSlide, чтобы состояние activeSlides изменилось на новые измененные данные в состоянии App.js.
  • Я могу подтвердить, что activeState изменился, когда я редактировал содержимое своего слайда, как описание.

Теперь я ожидал, что это повлияет на текущее состояние activeSlides, которое находится в SlideShow.js, но это не такпроисходит. Журнал консоли в методе App.js updateActiveSlides действительно показывает, что состояние activeSlides было обновлено новыми измененными данными

Ниже приведены ссылки на код

, устанавливающие начальные значения ActiveState и updateActiveSlides 

componentDidMount() {
axios.get(base_url + 'api/activeslides')
.then(res => 
   this.setState({ 
     activeSlides: res.data.data,
     imagesLoaded : true
  },
    console.log(res.data.data)

   )
  )
  // this.startSlideShow();
}

  updateActiveSlides = () => {
    console.log(this.state.activeSlides)
      axios.get(base_url + 'api/activeslides')
        .then(res => 
          this.setState({ activeSlides : res.data.data  }, () => {
            console.log(this.state.activeSlides, 'here again')
          })

          )
    }

Проходящие реквизиты 

<Route exact path="/" render={(props) => <SlideShow {...props} base_url={base_url} activeSlides={this.state.activeSlides} imagesLoaded={this.state.imagesLoaded}/>}/>
<Route path="/admin" render={(props) => <Admin {...props} base_url={base_url} updateActveSlides={this.updateActiveSlides} />}/>

editSlideMethod 

editSlide = (id, title, imageurl, description,  ) => {
// this.setState({ isEdit : true})
 console.log(id, title, imageurl, description)
axios.patch(this.base_url + `api/slide/${id}`, { 
   "title": title, 
   "imageurl" : imageurl,  
   "description" : description

})
.then(res => this.setState(
  { slides: this.state.slides.map(slide => {
  if (slide.id === id) {
    slide = {...res.data.data, id:id}

   }
   return slide;
})},
this.props.updateActveSlides()

)

)
.catch(err => (
  console.log(err)
) )
// setTimeout(()=> this.props.updateActveSlides(), 2000)

}

...