我正在将一个函数传递给 React 中的子组件,当我直接在按钮的 onClick 中调用它时,它工作得很好。但是当我将它移到一个单独的函数中并从 onClick 调用该函数时,它不再起作用。我可以验证正在使用日志语句调用该函数,但是 props.myFunction() 永远不会被调用。我现在在 React 中遇到过几次这种情况,它总是让我感到困惑。
我已经看过其他一些类似的问题,但仍然没有帮助。
React: Can't call prop function when it is inside of another function?
此代码有效 - 单击按钮时,它在父级中将 loginIn 设置为 true
export default function SignupModal(props) {
return (
<div class="main-block">
<button
className="create-account-button"
href="/"
onClick={props.setIsLoggedIn(true)}
>
Create Account
</button>
</div>
);
}
此代码未将 loginIn 设置为 true - 但仍会调用该函数
export default function SignupModal(props) {
const createAccount = () => {
console.log("this gets logged");
//but this doesn't get called
props.setIsLoggedIn(true);
};
return (
<div class="main-block">
<button
className="create-account-button"
href="/"
onClick={createAccount}
>
Create Account
</button>
</div>
);
}
谁能告诉我为什么?
这是我在父级中尝试做的事情,可能有点非正统地渲染这样的路由,但它用于启动页面 - 也如上所述,它在 onClick() 中完美运行
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<>
{isLoggedIn ? (
<>
<SearchBar onLocationChange={onLocationChange}></SearchBar>
<NavBar></NavBar>
<Switch>
<Route exact path="/quik">
<Pins
mapRef={mapRef}
pinnedLocationIds={pinnedLocationIds}
pinsRemaining={pinsRemaining}
pushPinnedLocation={pushPinnedLocation}
usePin={usePin}
mapCenter={mapCenter}
setMapCenter={setMapCenter}
matches={matches}
setMapZoom={setMapZoom}
mapZoom={mapZoom}
changeStatus={changeStatus}
/>
</Route>
<Route path="/potentials">
{/* dont forget,
the props for 'Potentials' must also pass
through 'potentials in the 'Pins' component! */}
<Potentials
pinsRemaining={pinsRemaining}
matches={matches}
changeStatus={changeStatus}
/>
</Route>
<Route path="/connects">
<Connects matches={matches} recentMatchId={recentMatchId} />
</Route>
<Route path="/profile" component={Profile} />
</Switch>
</>
) : (
<Route exact path="/quik">
<Landing setIsLoggedIn={() => setIsLoggedIn}></Landing>
</Route>
)}
</>
);
答案 0 :(得分:0)
为了说明您的两种情况之间的区别,请举出这个例子。当我在返回的 JSX 代码中立即调用一个函数时,它会在元素安装后立即触发。但是,在第二个按钮中,我必须在日志记录发生之前单击它。
function App() {
return (
<div>
<button onClick={console.log("foo")}>Immediate log</button>
<button onClick={() => console.log("bar")}>Must click to log</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('main'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="main"></div>
编辑:就您的代码而言,您实际上是将 setIsLoggedIn
设置为一个函数,该函数在您将其传递给 Landing
组件时返回一个函数:< /p>
<Landing setIsLoggedIn={() => setIsLoggedIn} ></Landing>
你想做的是:
<Landing setIsLoggedIn={setIsLoggedIn} ></Landing>
现在 setIsLoggedIn
只是一个函数,您的第二个示例将起作用(您的第一个示例将立即触发,而不是按照您的预期工作)。