BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】React HooksのPushメソッド(useState)？

2022-04-03 06:14:21

質問

useState配列のReactフック内で要素をプッシュするにはどうすればよいですか？ それはreact stateの古いメソッドとしてですか？それとも何か新しい方法ですか？

例 setStateプッシュの例 ?

解決方法は？

を使用する場合 useState を使用すると、ステートアイテムの更新メソッドを取得することができます。 

const [theArray, setTheArray] = useState(initialArray);

を作成し、新しい要素を追加したい場合は、 その関数を使用して新しい配列を渡すか、あるいは新しい配列を作成する関数を指定します。状態の更新は非同期で行われ、時にはバッチ処理も行われるため、通常は後者の方がよいでしょう。 

setTheArray(oldArray => [...oldArray, newElement]);

時には、そのコールバックフォームを使用せずに済むこともあります。 のみ のような特定のユーザーイベント用のハンドラで配列を更新します。 click (ただし mousemove ): 

setTheArray([...theArray, newElement]);

React がレンダリングのフラッシュを保証するイベントは、次のような "離散イベントです。 ここで .

ライブの例（コールバックを setTheArray ): 

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

を更新しただけだからです。 theArray の中にあるのは click イベント ("discrete" イベントの1つ) で、直接更新することができます。 addEntry : 

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray([...theArray, `Entry ${theArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します