Axios 响应在嵌套的 React 组件中不可用

Question

感谢阅读。我知道这看起来过于简单了，但我真的很困惑为什么会发生这种行为。我正在使用 axios 调用 API，得到答案，然后通过 props 将该答案传递给下面的组件。当我让以下代码执行时，控制台显示对象 - 填充了 server/api 数据。

class Player extends React.Component{
    constructor(props) {
        super(props);
    }   

    render() {
        console.log(this.props.personData)
        return ...
    }
}

如果我添加一个字段：console.log(this.props.personData.first_name) 我收到一个错误，指出 personData 为空，无法访问其成员。觉得这很奇怪，所以退后一步测试并进一步难倒自己：

如果我在 Chrome 行的 Chrome 中设置断点，而不是在控制台中键入 this.props.personData，我将得到 null。如果我随后跨过 console.log 行，它会输出 null。但是，如果我删除断点，同一行代码将输出一个数据填充对象。

谁能解释一下这种行为？

Answer 1

假设无论 Axios 是否已经返回，你的组件都会被渲染，personData 属性将是 null（或者你在父级状态下构建的任何东西）直到 Axios returns 异步调用.

您可以在数据 returns 后有条件地呈现 Player 组件，或者在您知道数据不为 null 之前不引用数据的属性。

这是因为 Player 组件将在父级挂载时最初呈现，但是，Axios API 调用将是异步的，因此数据不可用。

此外，如果 Player 组件渲染 personData 的属性而不检查它们是否存在，它会抛出错误并中断渲染周期。

关于你关于断点/日志差异的问题，这是因为控制台日志映射到prop的内存位置，所以最终它被设置并显示在日志中。但是，如果您在最初渲染它时通过断点检查，该值将为 null，并且会抛出上述错误。

Answer 2

如何使用 redux 或 flux 将数据传递给组件。

Axios 响应在嵌套的 React 组件中不可用

Axios response not available in nested React component

reactjs

axios