我正在嘗試從名為 Login 的孩子呼叫 onLogin() 函式。此函式將設定基于條件渲染完成的狀態。
問題是在呼叫 setState 之后 Home 沒有被渲染。實際上，在呼叫 setState() 后并沒有呼叫函式 getView()，盡管在我重繪 頁面后更新了視圖。
class App extends React.Component {
constructor(props) {
super(props);
this.onLogin.bind(this);
this.state = {userLoggedIn: !!localStorage.getItem(USER_NAME)};
}
onLogin() {
this.setState({userLoggedIn: true});
}
getView() {
return this.state.userLoggedIn ? <Home /> : <Login onLogin={this.onLogin} />;
}
render() {
return (
<span>
{this.getView()}
</span>
);
}
}
uj5u.com熱心網友回復：
您需要添加.bind(this)將道具傳遞給 Login 組件的位置，如下所示：
<Login onLogin={this.onLogin.bind(this)} />
你可以在super(props);
下面是代碼和框的鏈接后洗掉該行：https ://codesandbox.io/s/boring-chaum-5l8k6 ? file =/ src/App.js
uj5u.com熱心網友回復：
你似乎getView沒有像你那樣系結方法onLogin。為了避免系結問題，可能只需使用箭頭函式就可以了
class App extends React.Component {
constructor(props) {
super(props);
this.state = {userLoggedIn: !!localStorage.getItem(USER_NAME)};
}
const onLogin = () => {
this.setState({userLoggedIn: true});
}
const getView = () => {
return this.state.userLoggedIn ? <Home /> : <Login onLogin={this.onLogin} />;
}
render() {
return (
<span>
{this.getView()}
</span>
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351783.html
標籤：javascript 反应