Javascript 获取错误'；TypeError:无法读取属性'；id'；未定义的'；关于浏览器刷新

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

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

{
数据2.map（（数据，索引）=>{
返回


})
}

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

导出默认类详细信息扩展组件{
render（）{
const{data}=this.props.location；
返回(
{data.title}
)
}
}

它给出的错误如下。可以做出哪些可能的改变？

---

这是因为您正在使用

链接发送
数据
对象，但当浏览器刷新时，
数据
对象不再存在，因为
链接
不负责为其提供数据

将所有必需的数据放入url中，或将其存储在localStorage中。在详细信息页面中添加此代码

     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> 
                   }     
               )
              }
            }

导出默认类详细信息扩展组件{
render（）{
const{data}=this.props.location；
返回(
{数据&&
{data.title}
}     
)
}
}
刷新时，推送的数据不会出现

第一条路

因此，您可以在url中添加所有必需的详细信息，例如在redbus中搜索的工作方式，因为参数位于url中，所以很容易刷新

第二种方式

因此，如果数据较多，您可以在url中输入详细信息，如果输入url不好，或者您可以检查组件中是否有数据，如果没有数据，您可以使用id获取数据

第三条道路

由于您使用的是react router，因此可以执行此操作。props.history.push并添加状态

this.props.history.push({
          pathname : '/Taskactive',
          state :{
          role_id : responseJson.userFormat,
          userName : this.userName,
          userid: this.refs.usrname.value
          }
          } 
        );

在组件中，您可以这样获取

this.props.location.state.role_id

您可以传递所有数据，也可以传递所需数据（如id）并获取所有所需数据。
即使在刷新之后，上面的方法数据仍将存在，并且在卸载时需要进行清理

我希望你对这个问题有一个清晰的认识
这是因为你用Link发送数据，但当你刷新数据时，我会按照我的方式来处理，这是让Link指向类似
projects/${id}
的东西，然后我在细节页面中获取我的数据
以下是在刷新页面上保持数据的解决方案

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> 
    );
  }
}

导出默认类详细信息扩展组件{
状态={
数据：this.props.location.data？this.props.location.data:JSON.parse（localStorage.getItem（'object'））
}
componentDidMount（）{
if（this.props.location.data！==未定义）
setItem（“object”，JSON.stringify（this.props.location.data））；
}
render（）{
const{data}=this.state；
设title=data？data.title:“”；
设img=data？data.img:；
设id=data？data.id:0；
返回(
{title}
);
}
}
所以刷新后它不会渲染，因为检查数据（如果只有数据）后，它将渲染，否则将无法再次获得RenderTanks的帮助。。。事实上我也是这么想的，因为最后一个解决方案正是localStorage。。。好了，我的项目终于用这行代码完成了。。。非常感谢！！！！如果你不介意的话，我可以再问你两个问题吗？。。。不迟于现在，我将把它推到codesandbox上……这些疑问与他们各自的项目有关，一个与localStorage和其他CSS相关issue@Pranav是的，你好，瓦希德·阿赫塔
this.props.location.state.role_id

 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> 
    );
  }
}