另一页中的链接REACT状态数据显示错误未定义

Question

我是React的新手，在访问从Link传递到另一个页面的数据时遇到了困难。

我在主页上，我有一个链接，我正在重定向到另一个页面或组件(测试页面(，其中包含州名称和年龄。但我无法在测试页面中获取数据。下面是我尝试过的代码。

<Link
to={{
pathname: "/testpage",
state: {
Testname: {
name: "im test",
age: 20
}
}
}}
>
Hi test
</Link>

我想访问测试页面组件中的状态。所以在测试页面中，我的代码是这样的

import React, { PureComponent } from "react";
class Testpage extends PureComponent {
componentDidMount() {
const { Testname } = this.props.location.state.Testname;
console.log(Testname);
}
}

但我收到一个错误

无法读取未定义的属性"Testname">

Answer 1

您正在从Testname进行析构函数。您应该从state进行销毁

应该是：

import React, { PureComponent } from "react";
class Testpage extends PureComponent {
componentDidMount() {
const { Testname } = this.props.location.state;
console.log(Testname);
}
}