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

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 扩展并实时观看组件的 props。