Question

我正在尝试创建一个订单表（数组），每个订单中都有一个嵌套的“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？

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

Answer 1

据我所知，你正在覆盖你所在州的同一个领域。您应该更改ProductTable字段以维护每个产品列表的order_id。它应该是order_id到order_products的地图。

请注意，我的代码可能包含错误，因为我没有可编辑的可运行示例像这样：

ProductTable容器：

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

产品获取操作：

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

产品成功行动：

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

产品减少者

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

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

1 个答案: