私は簡単な反応アプリを作っています。私は注文する必要があります。その注文のために、私はすべてのユーザーと製品のリストが必要です。CreateOrderコンポーネントには、state - usersとproductsという2つの変数があります。ここにコンストラクタがありますなぜ反応コンポーネントがレンダリングされないのですか？
this.state.orders = OrderStore.getState()
this.state.products = ProductStore.getState()
this.state.users = UserStore.getState()
this.onOrderChange = this.onOrderChange.bind(this)
this.onProductChange = this.onProductChange.bind(this)
this.onUserChange = this.onUserChange.bind(this)
this.createOrder = this.createOrder.bind(this)
this.renderProducts = this.renderProducts.bind(this)
this.renderUsers = this.renderUsers.bind(this)
this.users = []
this.products = []
ご覧のとおり、私は3つのストアを使用しており、したがってこれらのストアを更新する3つの関数を使用しています。その後、私は製品とユーザーをレンダリングするための2つの機能を持っています。これらの関数は、それぞれの変数からすべての製品とユーザーを取り出し、のoptionタグの配列を作成します。これらの配列はthis.usersとthis.productsに格納されていますので、それらを使用できます。ここで
は、私は2つの違いの多くを見ることができないrenderUsersとrenderProducts
renderUsers(){
this.users = this.state.users.users.map((user, i) => (
<option
key={i + 1}
value={user}>
{user.username}
</option>
)
)
console.log(this.users)
}
renderProducts(){
this.products = this.state.products.products.map((product, i) => (
<option
key={i + 1}
value={product}>
{product.name}
</option>
)
)
console.log(this.products)
}
内のコードです。配列が作成され、optionタグで埋められた後、私はconsole.logを使用して結果を確認します。ここに実際に何の写真がありますか？
ご覧のとおり、2つのオブジェクトの配列があり、各オブジェクトは期待どおりの反応コンポーネントです。 私はthis.productsとthis.usersを使用してレンダリングし、最初は空です。次に店舗内で何かが変わったとき（すべての製品とユーザーでいっぱいになっている）、関数renderUsersとrenderProductsが実行されるため、配列はデータで埋められます。これが起こると私はビューが更新されることを期待しています。
問題が発生しました。この問題が発生し、this.productsが更新されていると、ビューは実際に変更され、実際にはすべての製品のリストで更新されます。しかし、同じロジックと同じ機能とコードを使用すると、ユーザーは更新されていません。彼らは同じままです。私はそれらを配列の要素として持っていますが、私はこの配列をrenderと呼びますが、それらは更新されていません。
ここにいくつかの情報を追加するには、私の全体CreateOrderファイルです。