在react函数组件中的函数内部调用props.myFunction()

Question

我正在将一个函数传递给React中的一个子组件，当我在按钮的onClick中直接调用它时，它可以完美地工作。但当我把它移到一个单独的函数中，并从onClick调用该函数时，它就不再工作了。我可以假设函数是用log语句调用的，但props.myFunction((永远不会被调用。我在React中遇到过几次这种情况，它总是让我感到困惑

我已经研究了其他一些问题，比如这个问题，但仍然没有帮助。

React：Can'；当prop函数位于另一个函数内部时，是否调用它？

此代码有效-当点击按钮时，它会在父级中将loggedIn设置为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>
);
}

该代码没有将loggedIn设置为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>
)}
</>
);

Answer 1

为了演示两种情况之间的差异，请使用此示例。当我在返回的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组件时，该函数将返回一个函数：

<Landing setIsLoggedIn={() => setIsLoggedIn} ></Landing>

你想做的是：

<Landing setIsLoggedIn={setIsLoggedIn} ></Landing>

现在setIsLoggedIn只是一个函数，您的第二个示例将工作(您的第一个示例将立即启动，而不是按您的意愿工作(。