javascript - 刷新时未定义 Location 属性 (ReactJS)

Question

我正在通过我的链接上的“to”属性从react-router-dom发送一个带有几个参数的对象。最初，当点击链接时，数据很好， Prop 也有其值(value)。一旦我刷新它们就未定义。

这是链接...

let newTo = {
     pathname: `/poke/${name}`,
    param1: name
}
const { name } = this.props;
<Link style={viewBtn} to={newTo}>View</Link>

如果重要的话，这是路线...

<Route path="/poke/:pokemon" component={PokeSummary} />

这是我接收 Prop 的其他组件上的代码...

    constructor(props) {
    super(props)
    this.state = {
        paramName: props.location.param1,
        pokemon: {
            id: 0,
            name: '',
        },
        isLoading: false
    }
}

componentDidMount() {
    this.fetchData(this.state.paramName)
}

fetchData = (nameP) => {
    fetch(`https://pokeapi.co/api/v2/pokemon/${nameP}`)
        .then(res => res.json())
        .then(data => this.setState({
            pokemon: {
                id: data.id,
                name: data.name,
            }
        }, () => {console.log(this.state.pokemon)}))
}

谢谢!

Answer 1

您可以只使用 props.match.params.pokemon 而不是像这样传递参数，因为如果用户没有通过您的链接重定向并直接导航到网址，这些内部状态将不可用