时间戳

首页 > 解决方案 > 每次渲染时刷新组件状态

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

问题描述

我有一个正在运行的 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：如果我更改任何内容，则无法读取未定义的属性“名称”。我正在使用 +2，因为我的 API 从 3 开始。我如何使这项工作适用于所有产品

标签： javascriptdjangoreactjsreact-routerfetch

解决方案

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

this.state.items[编号(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 来全局存储这个集合。

推荐阅读