反応：状態に変化がない場合でも再レンダリングする
ドゥアコス：
では、状態が変化したときにコンポーネントが再レンダリングされることはわかっていますが、状態をリセットしたい場合はどうでしょうか。次の例を見てください。
const Parent = ({ type }) => {
switch (type) {
case "number":
return <ShowNumber />;
case "text":
return <ShowText />;
default:
return <h1>nothing to do here</h1>;
}
};
const ShowNumber = () => {
const [number, setNumber] = useState(0);
return (
<>
<h1>{number}</h1>
<button
onClick={() => {
setNumber(prevNumber => prevNumber + 1);
}}
>
Update number from child
</button>
</>
);
};
const ShowText = () => {
return <h1>{"Hello world"}</h1>;
};
export default () => {
const [type, setStype] = useState("");
return (
<>
<Parent type={type} />
<button
onClick={() => {
setStype("number");
}}
>
Show number
</button>
<button
onClick={() => {
setStype("text");
}}
>
Show text
</button>
</>
);
};
番号を更新して[テキストを表示]をクリックすると、ShowTextコンポーネントが呼び出されます。当然、ShowNumberコンポーネントに戻ると、私の番号はceroに戻ります。
しかし、切り替えずに番号（またはその他の州に関連するもの）をリセットしたい場合（たとえば、「番号を表示」ボタンを押すたびに、番号をceroに戻す）
hgb123：
あなたはそれを達成することができます、する2つのことがあります：
- 設定値を設定オブジェクトに置き換えることで状態を再
Parentトリガーし、ボタンを押すたびにコンポーネントも再レンダリングされますconst [state, setState] = useState({}); ... setState({ type: "number" }); ShowNumber一意のコンポーネントキーを設定することにより、予想されるコンポーネント（つまり）を再マウントします（詳細は回答を参照）return <ShowNumber key={`show-number-${new Date().getTime()}`} />;
私はフォークして新しいサンドボックスで変更しました：
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
状態が変化しても、ページの更新後にコンポーネントを再レンダリングしないで反応する
- 2
状態変化時に再レンダリングしないで反応する
- 3
状態の変化時に子コンポーネントを再レンダリングしないで反応する
- 4
状態の更新後にDOMを再レンダリングしないで反応する
- 5
状態の再レンダリング後にステートメントが常に誤った状態になる場合に対応する
- 6
React Select別の状態を変更した場合でも、常に再レンダリングします
- 7
状態が変わらない場合、Reduxは再レンダリングを続けます
- 8
状態が更新されたときにコンポーネントの再レンダリングに反応しないのはなぜですか？
- 9
状態を変更するが再レンダリングしないreactredux
- 10
ネイティブに反応する：状態の変化時に子コンポーネントの再レンダリングを停止する方法は？
- 11
反応仮想化が必要な場合、グリッド全体をDOMでレンダリングするにはどうすればよいですか？
- 12
再レンダリング時にカスタムフックの状態が更新されない反応
- 13
状態が変化した後、Reduxはコンポーネントを再レンダリングせずに反応します
- 14
フックに反応し、コンテキストを提供しますが、状態の変化時に子を再レンダリングしません
- 15
コンポーネントは状態変化反応で再レンダリングされません
- 16
親の状態が変化したときに子コンポーネントが再レンダリングされないようにする方法
- 17
親の状態の変化に基づいて子コンポーネントが再レンダリングされないようにする
- 18
状態が変化したときに、状態に依存しないコンポーネントを再レンダリングしますか？
- 19
状態が変化した後、Reactが再レンダリングされないのですが、子コンポーネントの状態を設定するにはどうすればよいですか？
- 20
状態の変化時にReactNativeコンポーネントが再レンダリングされないのはなぜですか
- 21
変更が加えられていない場合でも、Angularが無限に再レンダリングするのは正常ですか？
- 22
レンダリングが反応する前に状態を設定する
- 23
状態が変化したときにReact-alertライブラリが再レンダリングされていないようです
- 24
状態の変化に応じて再レンダリングを実行する
- 25
状態が変化するたびに画像が再レンダリングされないようにする-React
- 26
レンダリングと状態に反応する
- 27
状態変化時にReact / Reduxコンポーネントが再レンダリングされない
- 28
React + Redux：状態の変化時にコンポーネントが再レンダリングされない
- 29
反応は状態変化時に再レンダリングされません
コメントを追加