如何從另一個組件調用 function 做出反應

Question

我試圖從不同的組件調用 function 但是當我 console.log('hi') 它出現但它沒有調用messageContext 。

這是我來自Invitees.js的以下代碼：

  const [showPreview, setShowPreview] = useState(false);

  const toggleUserPreview = () => {
    setShowPreview(!showPreview);
  };
      {showPreview && (
        <ResultsWrappers togglePreview={toggleUserPreview}>
          <UserPreview
            userInfo={applicant}
            skillStr={applicant.Skills}
            togglePreview={toggleUserPreview}
          />
        </ResultsWrappers>
      )}

這是具有 function 我想調用UserPreview.js的組件：

import { useMessageContextProvider } from "../context/MessageContext";
const UserPreview = ({ userInfo, skillStr, togglePreview }) => {
 const messageContextProvider = useMessageContextProvider();
  const messageUser = () => {
    togglePreview();
    messageContextProvider.updateActiveUserToMessage(userInfo);
    console.log('hi');
  };
...

};

這是我的消息上下文：

import { createContext, useContext, useState } from "react";
const messageContext = createContext();
export const MessageContextProvider = ({ children }) => {
  const [activeUserToMessage, setActiveUserToMessage] = useState({});
  const [isOpenMobileChat, toggleMobileChat] = useState(false);
  const updateActiveUserToMessage = (user) => {
    setActiveUserToMessage(user);
  };
  return (
    <messageContext.Provider
      value={{
        updateActiveUserToMessage,
        activeUserToMessage,
        isOpenMobileChat,
        toggleMobileChat,
      }}
    >
      {children}
    </messageContext.Provider>
  );
};
export const useMessageContextProvider = () => {
  return useContext(messageContext);
};

當messageContext調用它時，它應該像這樣打開聊天框：

Answer 1

您顯示的代碼不足以說 100%，但似乎toggleUserPreview - function 調用了兩次，因此它恢復為原始 boolean 值。

一次作為<ResultsWrappers togglePreview={toggleUserPreview}/>

第二次作為<UserPreview togglePreview={toggleUserPreview}/> 。