刷新时未定义位置道具（ReactJS）答案

【问题标题】：Location prop undefined on refresh (ReactJS)刷新时未定义位置道具（ReactJS）
【发布时间】：2020-02-04 16:30:24
【问题描述】：

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

这是链接...

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

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

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

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

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

谢谢！

【问题讨论】：

标签： javascript reactjs fetch

【解决方案1】：

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

【讨论】：

啊，伙计，你现在是我最喜欢的人，这很奏效。谢谢！我会尽快接受你的回答。