Я хочу передать реквизиты от родительского к нескольким дочерним компонентам, но в итоге получаю сообщение об ошибке Cannot read properties of undefined (reading 'props')
Приложение.js:
render() {
const {currentUser} = this.props
return (
<div id = "App" className='loader'>
<BrowserRouter>
<Routes>
<Route path='women' element = {<Women currentUser = {currentUser} />} />
Женщины.js:
render() {
const { isLoading } = this.state;
if (isLoading) {
return null;
}
const {currentUser} = this.props
return (
<div>
<div className='container mx-auto'>
<HomeHeaderW style = {{ backgroundColor: "#fff2e0" }} currentUser = {currentUser} />
ГлавнаяЗаголовокW.js :
function HomeHeaderW() {
const {currentUser} = this.props
const [isLogged, setLogged] = useState(false);
useEffect(() => {
if (currentUser) {
setLogged(true)
}
});
Я не знаю, почему я получаю ошибку undefined, у вас есть идеи по этому поводу? Или я делаю это неправильно
@mr rogers объяснил, что нужно сделать, чтобы заставить его работать, но природа сообщения об ошибке связана не с реакцией, а с JavaScript, «это» внутри этой функции не определено, поскольку эта функция объявлена в глобальном объекте и в разделе « строгий режим», у вас не может быть прямого доступа к глобальному объекту с ключевым словом «this».
HomeHeaderW
— это компонент, основанный на функциях (Women
и App
— компоненты, основанные на классах), вы не можете получить свойства от this.props
Вы должны передать свои реквизиты в параметрах
function HomeHeaderW(props) {
const {
currentUser
} = props;
const [isLogged, setLogged] = useState(false);
useEffect(() => {
if (currentUser) {
setLogged(true)
}
});
Вы можете проверить этот документ для лучшего понимания
HomeHeaderW
не является компонентом, основанным на классе, поэтому я думаю, что вы не можете использоватьthis.props
, но вместо этого ваша функция должна иметьprops
в качестве входного параметра:function HomeHeaderW(props) { ... }
. Если у вас есть другие компоненты с функциямиrender
, то похоже, что ваш проект может смешивать компоненты на основе классов с функциональными компонентами, поэтому эти две вещи не совсем выглядят/действуют одинаково.