доступ к конечным точкам wp api остальные заголовок поста отображается в приложении inreact

Question

Я ломаю голову о стену, я разрабатываю приложение React с WordPress в качестве API (wp rest API). все работает хорошо, я извлекаю и отображаю все сообщения, но когда я go перехожу к одному сообщению, я не могу извлечь и отобразить заголовок и содержимое, потому что там сказано {rendered: "dwdwdf"}, и я делаю { post.title.rendered}, как я это делаю в компоненте postlist, чтобы получить заголовок и работает, но в одном посте нет.

Чтобы сделать его более понятным, приведем код:

const id = this.props.match.params.id;
let postUrl = `http://thesite.com/wp-json/wp/v2/posts/${id}`;
fetch(postUrl)
  .then(data => data.json())
  .then(data => {
      this.setState({
         item: data
      })
  })

когда я утешаю this.state.item.title, он показывает мне следующее:

{rendered: "dwdwdf"}
rendered: "dwdwdf"
__proto__: Object

он должен отображаться так, как я делаю в своем компоненте postlist, например {this.state.item.title .rendered} и готово! но не, это дало мне эту ошибку:

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

Я проверил документацию api rest wp и много блогов и stackoverflow, но не могу найди все, что мне поможет.

если кто-то может мне помочь, спасибо.

Answer 1

В принципе, то, что вы показали, должно работать. Ответ этой конечной точки WP API включает:

"title": {
    "rendered": "Your post's title"
},

Это подтверждается выводом console.log.

Вы не показали состояние по умолчанию, где записан вывод console.log или где вы пытаетесь получить доступ к полному пути (т. Е. {this.state.item.title.rendered}), но похоже, что вы делаете по крайней мере часть полного пути в функции рендеринга.

Предполагая, что так, я считаю, что у вас есть проблема синхронизации. Функция рендеринга может запускаться столько раз, сколько необходимо (например, при обновлении компонента). При первом запуске ваше состояние не имеет свойство title, так как ваш HTTP-запрос еще не завершен. Он не определен, и когда вы пытаетесь получить доступ к дочернему свойству undefined, вы получаете эту ошибку.

Разница с вашим предыдущим оператором консоли в том, что вы не пытаетесь получить доступ к свойству undefined. Вы просто выводите само значение состояния (т.е. неопределенное). И одна очень хитрая вещь в консоли заключается в том, что это не историческая запись. Значение, которое показывает console.log, может измениться ... скажем, с 'undefined' на значение, которое будет установлено позже, свойство title и все. Все происходит так быстро, что вы этого не видите.

Лучше иметь в виду, что функция render () может запускаться снова и снова, и ваш JSX должен быть написан так, чтобы он учитывает возможные состояния, которые вы ожидаете. Здесь вы можете ожидать, что изначально ваше состояние для «элемента» не имеет всех свойств, которые оно будет иметь позже.

Вместо этого вы могли бы написать что-то вроде

{this.state.item.title ? this.state.item.title.rendered : 'Loading...'} 

или что-то еще Вы хотели бы написать там (или оставить это поле пустым и т. д. c.). Таким образом, вы сначала проверяете, имеет ли заголовок истинное значение ( не undefined), и, если это так, доступ к свойству ребенка. Обычным примером является использование этой формы:

{this.state.item.title && (<h1>{this.state.item.title.rendered}</h1>)}

Здесь разница в том, что мы полагаемся на возвращаемое значение JavaScript для &&, которое будет значением второго элемента. Если первый элемент ложный, он даже не смотрит на вторую часть, поэтому не жалуется.

Или вы можете попытаться сделать шаг назад и отследить отдельную переменную в состоянии для вашего процесс загрузки. Нечто подобное dataReady, которое вы установили бы в true после получения HTTP-запроса обратно. Затем ваш код рендеринга выглядит немного чище:

{this.state.dataReady && (
    <h1>{this.state.item.title.rendered}</h1>
    <h2>(some other stuff</h2>
)}

Для получения дополнительной информации я рекомендую прочитать о условном рендеринге .

Answer 2

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

Например, если ваше начальное состояние такое :

this.state = {
   item: {},
   ...anyOtherAttributes
}

и вы пытаетесь отрендерить this.state.item.title.rendered, он не найдет title, поэтому он будет undefined, и тогда React не сможет получить свойство rendered правильно.

Чтобы исправить это, вы должны инициализировать ваши сообщения следующим образом:

this.state = {
   item: {
     title: {rendered: ''}
   },
   ...anyOtherAttributes
}

, чтобы он имел вид заполнителя для рендеринга во время ожидания завершения асинхронного вызова и обновления состояния.

Надеюсь, это поможет.