如何从另一个组件调用函数反应

Question

我试图从不同的组件调用一个函数，但是当我 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>
      )}

这是具有我想调用的函数的组件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 - 函数调用了两次，因此它恢复为原始布尔值。

曾经是<ResultsWrappers togglePreview={toggleUserPreview}/>

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