Question

我正在将一个函数传递给 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>
    )}
  </>
);

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 组件时返回一个函数：< /p>

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

你想做的是：

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

现在 setIsLoggedIn 只是一个函数，您的第二个示例将起作用（您的第一个示例将立即触发，而不是按照您的预期工作）。

在反应功能组件的函数内调用 props.myFunction()

1 个答案: