[英]React js props undefined when passing state to another file
我正在尝试将我的 Sidebar.jsx 中的 toggleState 值作为道具传递给另一个文件 Screens.jsx,该文件根据 toggleState 值在显示主页或不显示任何内容之间切换。 但是,当我尝试访问 Screens.jsx 中道具的值时,它告诉我该值未定义。
侧边栏.jsx
import Screens from './Screens';
import {useState} from 'react';
function Sidebar() {
const [toggleState, setToggleState] = useState(1);
return (
<div>
<div
onClick={() => setToggleState(1)}
>
</div>
<div
onClick={() => setToggleState(2)}
>
</div>
<Screens toggleState={toggleState} />
</div>
);
};
export default Sidebar;
屏幕.jsx
import { useState, useEffect } from 'react';
import Homepage from './homepage';
function Screens({toggleState}) {
const [isActive, setIsActive] = useState(1);
console.log(toggleState);
useEffect(() => {
setIsActive(toggleState);
});
return (
<div style={{ height: 752 }}>
{ isActive === 1 ? <Homepage /> : null }
</div>
);
};
export default Screens;
边栏和屏幕都导入到我的 Home.jsx 中。 我不确定这是否会导致问题。
主页.jsx
import Sidebar from '../components/sidebar';
import Screens from '../components/screens';
function Home() {
return (
<div>
<div style={{ display: 'flex', width: 1200, height: 792 }}>
<div style={{ width: 71, height: 792, marginTop: -42, marginLeft: -10, overflow: 'hidden' }}>
<Sidebar />
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: 670, height: 752, backgroundColor: '#1e203c' }}>
<Screens />
</div>
</div>
</div>
);
};
export default Home;
useEffect
钩子缺少一个依赖数组来更新本地 state
useEffect(() => {
setIsActive(toggleState);
}, [setIsActive, toggleState]);
但这在 React 中是一种反模式,只需在组件中直接使用toggleState
即可。
function Screens({ toggleState }) {
return (
<div style={{ height: 752 }}>
{toggleState === 1 && <Homepage />}
</div>
);
};
您在两个地方渲染Screens
组件,一次在Sidebar
组件中,一次在Home
组件中。 将 State 提升到公共父组件Home
并向下传递所有需要的道具。
例子:
function Home() {
const [toggleState, setToggleState] = useState(1);
return (
<div>
<div style={{ display: 'flex', width: 1200, height: 792 }}>
<div style={{ width: 71, height: 792, marginTop: -42, marginLeft: -10, overflow: 'hidden' }}>
<Sidebar {...{ setToggleState, toggleState }} />
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: 670, height: 752, backgroundColor: '#1e203c' }}>
<Screens {...{ toggleState }} />
</div>
</div>
</div>
);
};
Sidebar
同时传递了setToggleState
回调以附加到div
元素
onClick handler, and
toggleState is passed along to
Screens`。
function Sidebar({ toggleState, setToggleState }) {
return (
<div>
<div onClick={() => setToggleState(1)}>
</div>
<div onClick={() => setToggleState(2)}>
</div>
<Screens toggleState={toggleState} />
</div>
);
};
Screens
像以前一样接收toggleState
。
function Screens({ toggleState }) {
return (
<div style={{ height: 752 }}>
{toggleState === 1 && <Homepage />}
</div>
);
};
使用 Home 文件中的 state:
import Sidebar from '../components/SideBar';
import Screens from '../components/Screens';
function Home() {
const [toggleState, setToggleState] = useState(1);
return (
<div>
<div style={{ display: 'flex', width: 1200, height: 792 }}>
<div style={{ width: 71, height: 792, marginTop: -42, marginLeft: -10, overflow: 'hidden' }}>
<SideBar setToggleState={setToggleState} />
</div>
<div style={{ display: 'flex', flexDirection: 'column', width: 670, height: 752, backgroundColor: '#1e203c' }}>
<Screens toggleState={toggleState} />
</div>
</div>
</div>
);
};
export default Home;
使用 SideBar 文件中的 setState 更改 state 并删除 de Screens 导入:
function Sidebar({setToggleState}) {
return (
<div>
<div
onClick={() => setToggleState(1)}
>
one
</div>
<div
onClick={() => setToggleState(2)}
>
two
</div>
</div>
);
};
export default Sidebar;
不需要在屏幕文件中使用其他 state:
import App from './App';
function Screens({toggleState}) {
console.log(toggleState);
return (
<div style={{ height: 752 }}>
{ toggleState === 1 ? <App /> : null }
</div>
);
};
export default Screens;
但是如果你想使用它,你必须告诉你的 useEffect 变量改变:
...
useEffect(() => {
setIsActive(toggleState);
},[toggleState]);
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.