如何使用 React Router 传递状态？

Question

我正在从 JSON 文件中获取冠军列表的数据，并尝试创建一个链接来查看每个冠军，但不确定如何在 react-router 的链接中传递 img 属性。

我尝试使用state: champion.img，但它没有提供任何东西。任何想法如何传递图像值？

import React, { Component } from 'react'
import axios from 'axios'
import { Link } from 'react-router-dom';
class PersonList extends Component {
    state = {
        persons: [],
        name:"",
           champs: [], 
           isLoaded: false,
        Aatrox:''
    }

    componentDidMount(){
        axios({
            method: 'get',
            url: 'https://api.myjson.com/bins/blcps'
        })
        .then(res => {
            this.setState({ persons: res.data[1]})


            console.log(res.data[0].name);
            console.log('ldldl');


             const champions = res.data.map((champion) => {
            console.log(champion.name)
            console.log(this.state.champs.name)
            return <div classname="container-fluid">
            <div classname="row">
            <p>ldldl</p>

              <h2 className="card-title">{champion.name}</h2>   </div> 

               <img src={champion.img} /> 

               <Link to={{ pathname:`/champions/${champion.name}`,// undefined  state: {champion.img} }} > {champion.name}  </Link>
</div> 


   })


          this.setState({ champs: champions, isLoaded: true });



        })


    }

    render() {
        return (
            <ul>
               {this.state.isLoaded ? <div>{this.state.champs}</div> : <div>.</div>}
            </ul>
        )
    }
}

export default PersonList;

Answer 1

当你console.log(champion.img) 时，你会得到一个完整的网址吗？如果不是，您必须放置文件的完整 url 而不仅仅是文件名才能工作。如何执行此操作取决于从服务器返回的内容。