时间戳

首页 > 解决方案 > 我正在尝试在控制台中打印道具，但是当我编写 console.log(props.details) 时，它会在控制台中打印两次

javascript - 我正在尝试在控制台中打印道具，但是当我编写 console.log(props.details) 时，它会在控制台中打印两次

问题描述

一旦我渲染了这个功能组件并打开控制台检查道具是否存在。控制台两次显示包含数组的道具，但第一次打印的数组为空，第二次打印的数组包含数据。我真的很困惑，无法调试这个错误。

下面是代码：

const MainConents = (props) => {
        console.log(props.details);
    return ( 
        <>
            <div className="container" style={{marginTop : "20px"}}>
                <div className="row">
                    <div className="col-12">
                            // show single post in loop wise from database
                            // show pagination for posts
                    </div>
                </div>
            </div>
        </>
    );
}

export default MainConents;

我的浏览器中的输出是：

这是图片的链接

标签： javascriptreactjs

解决方案

props是从父组件传递的，我相信这些details是通过调用 api 端点获取的。

因此，在初始渲染期间，后端服务器没有响应响应，因此，它会在开头显示一个空数组（这是 的初始值props.details）。但是当它发送响应时，props.details现在会更新，因此子组件MainConents将被重新渲染。然后，它将在控制台日志中显示更新的数组。

因此，最初您会看到一个空数组，然后是更新后的props.details.

如果您只需要在数组不为空时打印数组。然后你可以把一个简单的条件如下。（但这不是必需的，因为控制台日志仅用于调试目的）

if(props.details.length > 0){
console.log(props.details);
}

推荐阅读