Question

我有一些代码，允许用户单击图像，然后更新页面并显示单击的冠军名称。 json数据看起来像这样-http：//ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/Alistar.json

我在console.log response.data中看到一个对象对象，并且想知道如何通过具有response.data的部分（无论用户选择哪种拥护者）。我曾尝试添加像response.data.champion这样的变量，但我认为像这样无法看到任何变量都无法传递。

不确定是否值得发布代码，以防万一！我的代码如下，尝试通过newChamp函数获取的信息。
为了简化我的请求，例如，我想知道的是如何从任何可能的拥护者（如http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/Alistar.json或http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/Anivia.json）中单击response.data（无论用户单击什么）.key 或用户点击的其他任何拥护者。

import React, { Component } from 'react';
import './Champions.css';





class AllChamps extends Component  {

 render() {
let champion = this.props.champion;
        return(  
        <div className='champions'>
            <h1> all champions</h1>
            {Object.keys(this.props.champions).map((s) => (
                <div className='champs'     onClick={() => this.props.NewChamp({s, champion})}>        
                    <img   
                        alt='Champion Images'
                        src={`http://ddragon.leagueoflegends.com/cdn/10.16.1/img/champion/${s}.png`}
                        onClick={this.props.onClick}
                     ></img>     
                    {s} 
                </div>
            ))}
        </div>
)}}


class SpecificChamp extends Component  {

    render() {
       let champion = this.props.champion
       let Spec = champion[champion.length - 1];
        return (
            <div className='champions'>
                <h1> 1 champions</h1>
                <div className='champs'>
                    <button    onClick={this.props.onClick}></button>
                    {Spec}
                </div>
            </div>
        )}
}




class Champions extends Component {
    constructor(props) {
        super(props);
        this.handleAllChamps = this.handleAllChamps.bind(this);
        this.handleSpecificChamp = this.handleSpecificChamp.bind(this);
        this.NewChamp = this.NewChamp.bind(this);
        this.state = {
            champions: [],
            champion: [],
            clickedChamp: false,
            thisChamp: 'ahri'
        }}
NewChamp = (props) =>
 {
 let  s = props.s;
 props.champion.push(s);


fetch(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`)
    .then(response => { return response.json() })
    .then((response) => {
        Object.keys(response.data).map((a) => (s = a
        ))})
        fetch(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`)
            .then(response => { return response.json() })
            .then((response) => {
                console.log(s)
                console.log(response.data)

                console.log(props.champion)

                
                
        })
        console.log(`http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion/${s}.json`);

      

        

}

    handleAllChamps = (props) => {
        this.setState({ clickedChamp: true,
           })};
  
    handleSpecificChamp = () => {
        this.setState({ clickedChamp: false,
          })};

    componentDidMount(props) {
        const apiUrl = `http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion.json`;
        fetch(apiUrl)
        .then(response => { return response.json() })
          .then((response) => {
          this.setState({
              champions: response.data
             
          }, () => (this.state.champions))
      
          return  
      })
   
  }

    render() {
   
        const clickedChamp = this.state.clickedChamp;
        let display;
        if (clickedChamp ) {
            display = <SpecificChamp champion={this.state.champion} onClick={this.handleSpecificChamp} s={this.state.thisChamp}/>;
        } else {
            display = <AllChamps  champions={this.state.champions} onClick={this.handleAllChamps}  NewChamp={this.NewChamp} thisChamp={this.state.thisChamp} champion={this.state.champion} />;
        }
        return (
            <div>
                <div className='champions'></div>

                {display}
            </div>
        );
    }
}

export default Champions;

Answer 1

您的响应采用“对象对象”的形式。您必须使用JSON.stringify（response.data）才能在调试控制台中以字符串形式查看整个数据。

您将必须解构对象的对象。

Object.keys（response.data）.map（（key）=> console.log（response.data [key]））

在这种情况下，如果只是一把钥匙

response.data[s]

进入JSON数据对象时遇到问题

1 个答案: