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？如果不是，则必须放置文件的完整URL，而不仅仅是文件名才能起作用。如何执行此操作取决于从服务器返回的内容。

如何通过React Router传递状态？

1 个答案: