React-redux: Nested array is being duplicated - arrays

Question

I'm trying to create an order table (array) that has a nested "products" array in each order.
The order table is rendering as expected, but the products are the same for every order.
OrderTable Component (simplified for clarity)
class OrderTable extends Component {
componentWillMount() {
this.props.fetchPtOrders(this.props.patient_id);
}
renderOrders(orders) {
return orders.map((order) => {
return (
<tr key={order.id}>
<td>
<ProductTable id={order.id}/>
</td>
</tr>
);
});
}
render() {
const { orders, loading, error } = this.props.orderTable;
return (
<div class="container divcon">
<h1>Orders</h1>
<table class="pto">
<tbody>
{this.renderOrders(orders)}
</tbody>
</table>
</div>
);
}
}
export default OrderTable;
<ProductTable id={orders.id}/> arrays the products and is basically a copy of the above (minus the ProductTable component).
I tried debugging using IDs (3000022 and 3000023) and found that everything is being done in batches.
3000022 contains products / 3000023 is empty.
The response from the requests is being used for both IDs, and is overwritten with every iteration. Only the last response is used for every order.
ProductTable Container:
function mapStateToProps(state, ownProps) {
return {
ProductTable: state.order_products.ProductTable,
order_id: ownProps.id
};
}
const mapDispatchToProps = (dispatch) => {
return {
fetchPtOrderProducts: (id) => {
dispatch(fetchPtOrderProducts(id)).then((response) => {
!response.error ? dispatch(fetchOrderProductsSuccess(response.payload.data)) : dispatch(fetchOrderProductsFailure(response.payload.data));
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductTable);
Product Fetch action:
export function fetchPtOrderProducts(id) {
const request = axios({
method: 'get',
url: `${ROOT_URL}/order_product/search.php?s=${id}`,
headers: []
});
return {
type: FETCH_PTORDER_PRODUCTS,
payload: request
};
}
Product Success action:
export function fetchOrderProductsSuccess(order_products) {
console.log("products fetched")
return {
type: FETCH_ORDER_PRODUCTS_SUCCESS,
payload: order_products
};
}
Product Reducers
case FETCH_ORDER_PRODUCTS:// start fetching products and set loading = true
return { ...state, ProductTable: {order_products:[], error: null, loading: true} };
case FETCH_ORDER_PRODUCTS_SUCCESS:// return list of products and make loading = false
return { ...state, ProductTable: {order_products: action.payload, error:null, loading: false} };
How can I make orders.map() and <ProductTable /> array one ID at a time?
Thanks for you help! Sorry if anything is unclear... I'm a complete newbie.

Answer 1

As far as I can see you are overriding the same field in your state.
You should change ProductTable field to maintain order_id for each product list. It should be a map of order_id to order_products.
Note that my code might contain mistakes because I have no runnable example to edit.
Something like this:
ProductTable Container:
function mapStateToProps(state, ownProps) {
return {
orderProductTable: state.order_products.ProductTable[ownProps.id],
order_id: ownProps.id
};
}
const mapDispatchToProps = (dispatch) => {
return {
fetchPtOrderProducts: (id) => {
// Add `id` argument to fetchOrderProductsSuccess here
dispatch(fetchPtOrderProducts(id)).then((response) => {
!response.error ? dispatch(fetchOrderProductsSuccess(id, response.payload.data)) : dispatch(fetchOrderProductsFailure(response.payload.data));
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(OrderProductTable);
Product Fetch action:
export function fetchPtOrderProducts(id) {
const request = axios({
method: 'get',
url: `${ROOT_URL}/order_product/search.php?s=${id}`,
headers: []
});
return {
type: FETCH_PTORDER_PRODUCTS,
payload: {id}
};
}
Product Success action:
export function fetchOrderProductsSuccess(id, order_products) {
console.log("products fetched")
// Add `id` field here
return {
type: FETCH_ORDER_PRODUCTS_SUCCESS,
payload: {id, products: order_products}
};
}
Product Reducers
case FETCH_ORDER_PRODUCTS:// start fetching products and set loading = true
return { ...state, ProductTable: {...(state.ProductTable || {}), [action.payload.id]: {order_products:[], error: null, loading: true}}};
case FETCH_ORDER_PRODUCTS_SUCCESS:// return list of products and make loading = false
return { ...state, ProductTable: {...(state.ProductTable || {}), [action.payload.id]: {order_products: action.payload.products, error:null, loading: false}}}};