Question

我正在运行一个API，我正在尝试获取该API以获取有关某些产品的一些信息。我正在使用React Router路由产品，并使用它来获取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：如果我进行任何更改，则无法读取未定义的属性“名称”。我使用的是+2，因为我的API从3开始。我如何在所有产品上使用此功能

Answer 1

您应该检查是否已加载项目

this.state.items [Number（this.state.id）]

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

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

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

也可以每次重写state.items。也许您应该使用Redux在全球存储此集合。

每次渲染组件时刷新组件状态

1 个答案: