你能在组件初始化时传入useState函数吗?

Question

我使用useState钩子来管理屏幕上的呈现组件。我想用一个组件来初始化它，同时传入useState函数来将屏幕设置到组件中。

这是我的App.js。我得到的错误是关于在初始化时将函数传递给自身。

function App() {
//useState hooks to determine which component should render
const [screenLoaded, loadScreen] = useState(() => {
<Home setLoadedScreen = {loadScreen}/> 
})
return (
<div className="App">
{screenLoaded}
</div>
);
}

Answer 1

useState的默认值总是在括号中，在这种情况下不需要花括号。const [state, setState] = useState(default)。这种状态可以在未来用setState(new value)来改变。

Answer 2

一个简单的方法是给你的屏幕起一个名字，例如

<Home /> === "home-screen"
<About /> === "about-screen"

所以当你将loadScreen的setState方法传递给组件时，你可以通过设置字符串来切换它们，例如，如果你在主屏幕，你想切换到about屏幕，你可以写

setLoadedScreen("about-screen")

function App(){
const [screenLoaded, loadScreen] = useState("home-screen")
return (
<div className="App">
{screenLoaded === "home-screen" && <Home setLoadedScreen = "loadedScreen" />}
{screenLoaded === "about-screen" && <About setLoadedScreen = "loadedScreen" />}
</div>
);

}