問題タブ [mobx]

基本的にチェックボックスのようなコンポーネントを構築していますが、デザインはカスタマイズされています。

私のコンポーネントは

Mobx または Redux の状態管理を使用できるように、状態を処理する正しい方法は何でしょうか? 言い換えれば、このコンポーネントを状態管理に依存させず、コンポーネントの外部から状態を変更できるようにするにはどうすればよいでしょうか?

現在、状態管理に typed React (TSX) と mobx を使用しています。

オブザーバーと注入デコレーターの両方を使用するコンポーネントを構築できます。しかし、オブザーバーなしで注入を使用するコンポーネントを構築することはできません。

これは typescript コンパイラを渡します

ただし、これは失敗します

以下のエラーメッセージで

このエラーメッセージの頭と尾を作るのを手伝ってください。私の賭けは、タイピングが時代遅れか何かであるということです。または、オブザーバーなしでの注入の使用は、実際には無効な組み合わせです。

私は React Native を初めて使用し、MobX を初めて使用しましたが、最初のプロジェクトでファイル間で props/store を動的に更新および変更する必要があったときに必要であることに気付きました。

プロジェクトの github は次のとおりです: https://github.com/Kovah101/GenreGeneratorv1

ランダムなジャンルの音楽の名前を生成するアプリを構築しようとしています。メイン ファイルはすべてのコンポーネントをレンダリングし、乱数が生成されていることを確認するための小さな console.log を持っています。ここでエラーは発生しません

次に、GenerateButton は、onClick乱数の配列を生成するイベントでボタンをレンダリングします。これらはチェックされmainOriginal、正しく機能します。randomNumbersMobXは常に更新され、最終的なファイルに渡されるため、監視可能にするためにも MobX を使用しますgenreSelector。

GenreSelector は、乱数の配列を使用して、それらを 3 つの異なるジャンル配列のサイズにマップし、次に、各配列からランダムなジャンルの 1 つをそれぞれ含む 3 つのボックスをレンダリングする必要があります。ただし、「chosenRandoms」で「var」に設定し、「get randomGenres」でも同じように設定すると、予期しないトークンが取得されます。私の理解では、それらは何かである必要があります。

私が間違っていることについて誰かが何か考えを持っていますか? varとを取り出すgetと、数学操作行の最後でエラーが発生します。私は何かを悪用しているに違いない。助けてくれてありがとう、もっと多くのコードを提供できますが、スタイルシートまたはインデックスに問題があるとは思いません。

MobX を理解し、単純なストアを作成しようとしています。

ただしwindow.store、 field は含まれませんsomeField。このデコレーターフィールドがないと、オブジェクトに存在します。webpack.config のローダー:

と組み込もうとしてmobxいreactます。を使用してアプリケーションを生成したためcreate-react-app、mobx によって提供されるデコレータを使用できません。

このドキュメントに従って、デコレータなしで mobx を使用できる場合: https://mobxjs.github.io/mobx/best/decorators.html

作成したコンポーネントは次のとおりです。

上記のコンポーネントの簡単な呼び出しは次のとおりです。

上記のコンポーネントを実行するとUncaught TypeError: (0 , _mobxReact2.default) is not a function(…)、コンソールに何も表示されないというエラーが表示されます。

ここで何が間違っていますか？

Mobx & React を始めたばかりで、ストアの更新に問題があります。「me」プロパティを更新する必要があるボタンをクリックすると、エラーが発生します。

私の店：

コンポーネント:

これがどのように機能するかの基本的な部分を見逃している可能性がありますが、それを理解することはできません.

Mobx を使用すると、ストアを更新した後 (つまり、ボタンをクリックした後)、コンポーネントが再レンダリングされません。初期ロード後に何も表示されない mobx devtools をインストールしましたが、コンソールにエラーはありません。私が間違ったことをしたアイデアはありますか？

Store.js:

レイアウト.js:

index.js: