为什么我不能console.log(props)?

Question

当我试图console.log(props)它给我一个空对象。它返回{}。当我在控制台写道具时它也会给出VM410:1 Uncaught ReferenceError: props is not defined: 1:1尽管它在代码中定义下面是代码

import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux';
import { getProductsBySlug } from '../../actions';
import { Layout } from '../../components/Layout'
/**
* @author
* @function ProductListPage
**/
export const ProductListPage = (props) => {
const dispatch=useDispatch();
console.log(props);
useEffect(()=>{
console.log(props);
dispatch(getProductsBySlug());
},[]);
return(
<Layout>
ProductListPage
</Layout>
)
}

这是Product .action.js文件，我从中获得产品列表页面

import axios from "../helpers/axios";
export const getProductsBySlug=(slug)=>{
return async dispatch=>{
const res=await axios.get(`/products/${slug}`);
console.log(res);
}
}

这是布局页

import React from 'react'
import { Header } from '../Header'
import { MenuHeader } from '../MenuHeader'
/**
* @author
* @function Layout
**/
export const Layout = (props) => {
return(
<>
<Header/>
<MenuHeader/>
{props.children}
</>
)

}

这是头文件

import React from 'react'
import './style.css';
/**
* @author
* @function Header
**/
export const Header = (props) => {
return(
<div className='header'></div>
)
}

这是菜单头文件

import React, { useEffect } from 'react';
import './style.css';
import { useSelector, useDispatch } from 'react-redux';
import { getAllCategory } from '../../actions';
/**
* @author
* @function MenuHeader
**/
export const MenuHeader = (props) => {
const category = useSelector(state => state.category);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getAllCategory());
}, []);

const renderCategories = (categories) => {
let myCategories = [];
for (let category of categories) {
myCategories.push(
<li key={category.name}>
{
category.parentId ? <a
href={`/${category.slug}?cid=${category._id}&type=${category.type}`}>
{category.name}
</a> :
<span>{category.name}</span>
}
{category.children.length > 0 ? (<ul>{renderCategories(category.children)}</ul>) : null}
</li>
);
}
return myCategories;
}
return (
<div className="menuHeader">
<ul>
{category.categories.length > 0 ? renderCategories(category.categories) : null}
</ul>
</div>
)
}

我退出的主要原因是当我通过链接http://localhost:3000/Samsung时我想向Samsung发送get请求但它实际上是未定义的http://localhost:2000/api/products/undefined

我怎样才能把Samsung替换为undefined

Answer 1

兄弟，请使用来自react-router-dom的useLocation()。

import {useLocation} from "react-router-dom"

const location = useLocation();Const slug = location.pathname.split("/")[1];

Answer 2

当我试图console.log(props)它给我一个空对象。它返回{}。

如果你没有向元素传递任何道具，就会发生这种情况。我
。我这样做:<ProductListPage />

代替:<ProductListPage testProp="123 />

当我尝试编写道具时，也在控制台上它给出VM410:1 Uncaught ReferenceError: props未在:1:1定义，尽管它在代码

中定义

Props对象是函数组件的局部对象。您尝试在浏览器控制台中调用的对象没有在全局作用域中定义。

阅读更多关于javascript作用域的信息