反应没有传递道具给孩子？

Question

我试图将此axios调用中的数据传递给子组件Hero。尽管已经传下来的道具并且成功地召唤了一个axios，但它实际上并没有成为Hero div。

当我在子组件上安装console.log时，它声称拥有数据，但后来无法将其推送到champions数组，因此我无法使用它。有什么想法吗？

编辑：

我在这里加上我确实在这个项目中安装了react-router但是这个数据正在一个＆＃34;视图＆＃34;而不是多页。

这是父组件

import React, { Component } from 'react';
import axios from 'axios';
import './assets/stylesheets/screen.css';
import Hero from './Hero';
import Info from './Info';


class Home extends Component {

constructor(props){
  super(props);

  this.state = { champions: [] };

}

 componentDidMount() {
    axios.get(
     'https://api.pinterest.com/v1/boards/gasulliv/pose-
references/pins/?access_token=AQjW6hDdAF0egwEesZA6oJbqP0XQFQ-
 m6_jg2RpErKPqdSA7cQAAAAA&limit=100&fields=id%2Clink%2Cnote%2
Curl%2Coriginal_link%2Cimage').then(champions => {
    this.setState({ champions });
    console.log(champions);
      });
  }

  render() {
    return (
  <div>
    <Hero champions = {this.state.champions} />
    <Info />
  </div>
);
  }
}

export default Home;

这是子组件（在此控制台日志中，我得到两个答案，一个声称它有数据而另一个声称它没有）：

import React from 'react';
import Header from './Header';


import 'bootstrap/dist/css/bootstrap.min.css';
import './assets/stylesheets/screen.css';



const Hero = (props) => {
    console.log(props);
return (

    <div className = "jumbotron kindred">
        <Header />
        <div className = "textHolder">{ props.champions.length }</div>
    </div>

    )
}

export default Hero;

Answer 1

您必须访问数据密钥 response.data

中的数据

请尝试以下操作。

axios.get('https://api.pinterest.com/v1/boards/gasulliv/pose-references/pins/?access_token=AQjW6hDdAF0egwEesZA6oJbqP0XQFQ-m6_jg2RpErKPqdSA7cQAAAAA&limit=100&fields=id%2Clink%2Cnote%2Curl%2Coriginal_link%2Cimage')
.then((response) => {
    this.setState({
        champions: response.data
    })
})
.catch((error) => {
    // Do something with the error
})

Answer 2

感谢您的帮助，但事实证明这个问题与我安装路由器的事实有关。可能我只需要通过路由器而不是页面传递数据。

感谢你的帮助！