入れ子になった useState で 全角入力すると onChange が 3回飛ぶのはなぜなのでしょうか？
Mac で、下のようなコードで「全角入力→enter」すると onChange が ３回飛びます。
CodeSandbox にコードがあります ↓
https://codesandbox.io/s/nifty-sunset-49kyi2?file=/src/App.js:0-631
発生している問題・エラー
App.js
import React, { useState } from "react";
const App = () => {
const [hoge, setHoge] = useState([]);
return <HogeComponent hoge={hoge} setHoge={setHoge} />;
};
const HogeComponent = ({ hoge, setHoge }) => {
const [inputValue, setInputValue] = useState("");
const handleChange = (e) => {
console.log(e.target.value);
setHoge((prev) => [...prev, e.target.value]);
setInputValue(e.target.value);
};
return (
<div>
<input value={inputValue} onChange={handleChange} />
<ul>
{hoge.map((h, index) => {
return <li key={`hoge_${index}`}>{h}</li>;
})}
</ul>
</div>
);
};
export default App;
このフォームでフォームを全角入力するして「Enter」を押すと、3回 onChange が飛びます。
また、Windows だと 「Enter」の代わりに「左クリック」をしても 3回 onChange が飛びます。
console.log 出力例1
あ
""
あ
console.log 出力例2
あああ
ああ
あああ
onChange が 3回飛ぶ理由に、onChange内の setState の State の値を、HogeComponent 自身が参照しているからなことがあります。
→ 該当するソースコード
略式コード
import React, { useState } from "react";
const App = () => {
+ const [hoge, setHoge] = useState([]);
+ return <HogeComponent hoge={hoge} setHoge={setHoge} />;
};
+const HogeComponent = ({ hoge, setHoge }) => {
const [inputValue, setInputValue] = useState("");
const handleChange = (e) => {
console.log(e.target.value);
+ setHoge((prev) => [...prev, e.target.value]);
setInputValue(e.target.value);
};
return (
<div>
<input value={inputValue} onChange={handleChange} />
<ul>
{hoge.map((h, index) => {
return <li key={`hoge_${index}`}>{h}</li>;
})}
</ul>
</div>
);
};
export default App;
ここで、なぜ3回も onChange が飛ぶのか説明できる方はいないでしょうか？
半角だと起きないので、composition などが関係するのでしょうか？
また、windows 環境での「全角入力→Enter」と「全角入力→左クリック」の入力方法の違いがわかる人はいるでしょうか？
どうぞよろしくお願いいたします。
0
