Question

我正在建立一个存储来自JSON文件的变量的网站，然后我可以显示该数据。我试图从一个对象中提取数据，但我一直得到未定义的或空的数组/对象。

此处的内容来自我的父组件。

export default class App extends Component {
    constructor(){
        super();
        this.state = {
            arrival: {}
        }
    }

    axiosFunc = () => {
        axios.get('https://api.warframestat.us/pc').then(results => {
            this.setState({
                arrival: results.data.voidTrader.activation,
            });
            setTimeout(this.axiosFunc,1000 * 60);
        })
    }

    componentDidMount() {
        this.axiosFunc();
    }
}

接下来，在子组件中，我使用props来存储到达数据。

<Baro arrival={this.state.arrival}/>

但是，当我切换到子组件的文件来显示数据时，我得到一个空对象......

componentDidMount(){
    console.log(this.props.arrival)
}

如何显示正确的数据？

Answer 1

您的子组件可能在GET请求解决之前安装。您显示的控制台日志位于componentDidMount中。尝试从componentWillReceiveProps或componentDidUpdate登录控制台，并查看数据是否稍晚到达。

或者，安装优秀的React Dev Tools Chrome扩展程序并实时观看组件的道具。

如何访问axios加载的对象属性？

1 个答案: