обновлять состояние компонента каждый раз, когда он отображается - PullRequest
Новая
       24

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

0 голосов
/ 21 января 2019

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

Вот мой выбор: 

componentWillMount(){
let id = this.props.params.id + 3;
let url = 'http://localhost:8000/api/item/' + id + '/';
return fetch(url)
  .then(results => results.json())
  .then(results => this.setState({'items': results}))
  .catch(() => console.log(this.state.items));

и где я вызываю заполнение информации 

render() {
return (
  <div className="itemPageWrapper">
    <div className="itemImgWrapper" />
    <div className="itemInfoWrapper">
      <Link className="backLink" to="/">
        <span className="small">
          <svg fill="#000000" height="13" viewBox="0 0 18 15" width="13" xmlns="http://www.w3.org/2000/svg">
            <path d="M7 10l5 5 5-5z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
        </span>All Items
      </Link>
      <h3 className="itemName">{this.state.items[Number(this.state.id)].name}</h3>
      <p className="itemCost frm">{this.state.items[Number(this.state.id)].price}</p>
      <p className="description">
        {this.state.items[Number(this.state.id)].description}
      </p>
      <p className="seller frm">By <span>{this.state.items[Number(this.state.id)].brand}</span></p>
    <button className="reqTradeBtn normalBtn">Order</button>
    </div>
  </div>

Я получаю сообщение об ошибке TypeError: Невозможно прочитать свойство 'name'из неопределенного, если я что-то изменить.Я использую +2, потому что мой API начинается с 3. Как бы я сделал эту работу для всех продуктов

1 Ответ

0 голосов
/ 21 января 2019

Вам следует проверить, загружены ли эти предметы

this.state.items [Number (this.state.id)] * ​​1004 * 

render() {
   const item = this.state.items[Number(this.state.id)];

   if (!item) {
      return 'Loading';
   }

   return (
       <div className="itemPageWrapper">
       ......
       </div>
   );
}

Также вы каждый раз переписываете state.items. Возможно, вам следует использовать Redux для глобального хранения этой коллекции.

...