反应-如何设置“我的邮件”

Posted 2023-02-28

我有2个状态：

const [formData, setFormData] = useState( input: null );
const [outputData, setOutputData] = useState( output: null );

formData来自我的<输入>。因此，我正在通过写入来写入输入数据。 outputData来自我的GET api调用。我需要将输入数据和输出数据分开。如果消息是我发来的，我怎么知道？

function renderMessage(message) 
    //const here
    if (messageFromMe) 
      return <Me />;
     else 
      return <You />;
    
  

  function Me(props) 
    return (
      <li className="Messages-message currentMember">
        <div className="Message-content">
          Hey its me
        </div>
      </li>
    );
  

  function You(props) 
    return (
      <li className="Messages-message">
        <div className="Message-content">
          Test
        </div>
      </li>
    );
  

答案

[useEffect hook可能是一个很好的应用程序。 useEffect挂钩具有2个参数，一个回调函数（可以是renderMessage）和一个值数组。每当数组中的值更改时，useEffect都会调用传递给第一个参数的函数。挂钩本身将位于更高级别的组件内，当您和您的Me和You组件通过挂钩的回调呈现时，它们将有效地成为父组件。

现在我们可以这样做：

const [formData, setFormData] = useState(null);
const [outputData, setOutputData] = useState(null);
const [lastMessageSender, setLastMessageSender] = useState("");

let messageFromMe = (lastMessageSender === "me");

useEffect(()=>renderMessage(message), [lastMessageSender]);

[最后一块是-每当您调用setFormData时，也调用setLastMessageSender并传递值“ me”，每当您调用setOutputData时，也调用setLastMessageSender并传递值“ you”-它们最终可能是其他值，例如作为用户名。

您可能希望使用便利功能来帮助您使代码保持干燥...

const updateMessageFromOutput = payload => 
setOutputData(payload);
setLastMessageSender("you");


const updateMessageFromForm = payload => 
setFormData(payload);
setLastMessageSender("me");