React-redux：嵌套数组正在重复

Posted 2021-04-19

我正在尝试创建一个订单表（数组），每个订单中都有一个嵌套的“products”数组。

订单表按预期呈现，但每个订单的产品相同。

OrderTable组件（为简洁起见而简化）

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}/>对产品进行排列，基本上是上面的副本（减去ProductTable组件）。

我尝试使用ID（3000022和3000023）进行调试，发现一切都在batches中完成。

3000022包含的产品/ 3000023是空的。

请求的响应用于两个ID，并在每次迭代时被覆盖。每个订单只使用最后一个响应。

ProductTable容器：

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);

产品获取操作：

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
  };
}

产品成功动作：

export function fetchOrderProductsSuccess(order_products) {
  console.log("products fetched")
  return {
    type: FETCH_ORDER_PRODUCTS_SUCCESS,
    payload: order_products
  };
}

产品减速器

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} };

我怎样才能制作orders.map()和<ProductTable />阵列one ID at a time？

谢谢你的帮助！对不起，如果有什么不清楚...我是一个完整的新手。