反应不给孩子传递道具？答案

【问题标题】：React not passing props to children?反应不给孩子传递道具？
【发布时间】：2018-02-12 20:23:39
【问题描述】：

我正在尝试将此 axios 调用中的数据传递给子组件 Hero。尽管传递了 props 并成功调用了 axios，但它实际上并不会进入 Hero div。

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

编辑：

我将在这里补充一点，我确实在这个项目中安装了 react-router，但是这些数据是通过一个“视图”而不是多个页面传递的。

这是父组件

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;

【问题讨论】：

我认为 axios 返回包含各种信息的响应对象，statusCode 等，您可能需要更新 axios .then 调用此：axios.get("...url").then(response => { this.setState({ champions: response.data }); });
该 URL 正在返回 400 Bad Request
我明白你的意思，但还是不行。它声称它在那里，然后再次丢弃数据。

标签： reactjs

【解决方案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
})

【讨论】：

【解决方案2】：

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

感谢您的帮助！

【讨论】：

基于显示response.data的日志，并且Hero中的道具是一个对象而不是数组，你确定你已经足够深入并且response.data中没有另一个键吗？由于组件不存在，因此此问题与路由器无关。通常API不会在数据中返回数组，通常是JSON，所以数据可能在另一个冠军this.setState({ champions: response.data.( look for extra key and apply here) })的键下
这是一个很好的观点。我将再次尝试搜索该对象。