問題タブ [react-lifecycle]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - コンポーネントがマウントされた後、React 状態が初期値にリセットされます
私のコンポーネントは、プライマリ ナビゲーションとセカンダリ ナビゲーションを含むヘッダーです。これまでのところ、Web サイトの大きなセクションから選択するプライマリ ナビゲーションのみを扱っています。状態はメインのヘッダー コンポーネントに持ち上げられますが、UpperMenu コンポーネントはイベント リスナーとアクティブなリンク ID のみを props として受け取ります。
問題は、状態変更は正しく行われますが、マウントを実行すると状態が初期値に戻ってしまうことです。これにより、CSS で「点滅」が発生します。つまり、ビューが正しくレンダリングされ、わずか 1 秒後に最初に選択されていたリンクに戻ります。何がそのような動作を引き起こす可能性があるのか わからないので、助けていただければ幸いです。
Header.js:
UpperMenu.js:
PSライフサイクルをデバッグして、これがどの時点で発生し、問題がcomponentDidMountで始まるかを判断しようとしました。
reactjs - Redux状態の更新後にComponentDidMountが呼び出されませんか?
ここで React と Redux についての概念が欠けていると思います。redux に保存されているオブジェクトを操作しようとしていますが、問題が発生しています。
REDUX: データベースからすべてのアイテムを取得するアクション fetchItems があります。このアクションは正常に機能します。
REACT: componentDidMount で fetchItems を呼び出すコンテナー UserProfile があります。
私が見ている問題は、this.props.items が常に null であることです (fetchItems が成功した場合でも)。アイテムが redux ストアに格納されていることを検出できる唯一の方法は、componentWillRecieveProps(nextProps) を使用する場合です。ここでは、nextProps のアイテムが正常に表示されます。ただし、 componentWillReceiveProps を使用するのは「面倒」すぎるかもしれません。私が求めているのは、反応で還元状態の更新を処理する標準的な方法は何ですか?
アシール