私には2つの州があります：
const [formData, setFormData] = useState({ input: null });
const [outputData, setOutputData] = useState({ output: null });
formDataは私の<input />から来ています。そこで、入力データを書き込みで書き込んでいます。outputDataは私のGETAPI呼び出しから来ています。
入力データと出力データを分離する必要があります。メッセージが私からのものであるかどうかを関数に伝えるにはどうすればよいですか？
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フックに適したアプリケーションかもしれません。useEffectフックは、コールバック関数（renderMessageの場合もあります）と値の配列の2つの引数を取ります。配列の値が変更されるたびに、useEffectは最初の引数に渡された関数を呼び出します。フック自体は、フックのコールバックによってレンダリングされたときに、YouコンポーネントとMeコンポーネントを効果的に親にする高レベルのコンポーネントの内部にあります。
今、私たちはこれを行うことができます：
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」を渡します-これらは最終的には他の値になる可能性があります。ユーザーの名前。
コードをDRYに保つのに役立つ便利な関数が必要になる場合があります...
const updateMessageFromOutput = payload => {
setOutputData(payload);
setLastMessageSender("you");
}
const updateMessageFromForm = payload => {
setFormData(payload);
setLastMessageSender("me");
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加