Question

浏览器刷新时出现错误“TypeError：无法读取未定义的属性‘id’”

2019-12-17

913

javascript reactjs

在我的投资组合项目中，当单击项目图像时，它会重定向到一个新页面，该页面提供了该项目的详细信息，该页面没有任何缺陷，但是，当刷新浏览器时，它会给出如上标题中所述的错误。可能是什么原因造成的？

Project.js（此处创建了项目卡）

{  
        data2.map((data, index) => {
          return <MDBCol key={index}>
          <MDBCard style={{ width: "20rem"}}>
          <Link to={{ pathname: `/details/${data.id}`, data:data }}>
          <MDBCardImage className="img-fluid" src={data.img}/>
          </Link>
          </MDBCard>
          <br/>
          </MDBCol>
        })
      }

Details.js（单击项目图像时重定向到此页面）

export default class Details extends Component {
    render() {
        const { data } = this.props.location;
        return (
            <Layout fixedHeader>
            <div className="details-body" key={data.id}>
                <h2 className="details-title">{data.title}</h2>
                <img src={data.img}/>
            </div>         
            </Layout>      
        )
    }
}

它给出的错误如下。可以进行哪些可能的更改？

Answer 1

这是在刷新页面时保持数据不变的解决方案。

Details.js

 export default class Details extends Component {
  state = {
    data: this.props.location.data ? this.props.location.data:JSON.parse(localStorage.getItem('object'))
  }
  componentDidMount() {
    if(this.props.location.data!==undefined)
    localStorage.setItem("object", JSON.stringify(this.props.location.data));
  }
  render() {
    const {data} =this.state;
    let title = data ? data.title : "";
    let img = data ? data.img : "";
    let id = data ? data.id :0;
    return (
      <Layout fixedHeader>
        <div className="details-body" key={id}>
           <h2 className="details-title">{title}</h2>
           <img src={img} alt="detail-img" />
        </div>         
    </Layout> 
    );
  }
}

Answer 2

这是因为您正在使用 Link 发送 data 对象，但是当浏览器刷新时，该 data 对象不再存在，因为 Link 不负责为其提供该对象。

请将所有必需的数据放在 url 中或将其存储在 localStorage 中

Answer 3

在您的详细信息页面中添加此代码

     Export default class Details extends Component {
     render() {
         const { data } = this.props.location;
         return (
            {data && 
             <Layout fixedHeader>
             <div className="details-body" key={data.id}>
                 <h2 className="details-title">{data.title}</h2>
                 <img src={data.img}/>
             </div>         
             </Layout> 
                   }     
               )
              }
            }