我有2个州：
const [formData, setFormData] = useState({ input: null });
const [outputData, setOutputData] = useState({ output: null });
formData来自我的<input />。因此，我正在通过写入来写入输入数据。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");
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句