带有 React 顺序的 Django Rest Framework 不起作用

Question

我的应用程序中有一个列表，它是从两个相关的表（产品和库存）创建的。我想按库存表中的日期订购商品。我的 API 返回有序列表，但在我的应用程序中，列表没有排序。当我尝试按任何 Products 字段订购时，它工作正常 - 也在反应中。

我的看法：

class StocksView(viewsets.ModelViewSet):
    serializer_class = StocksSerializer
    ordering_fields = ['date']
    filter_backends = (filters.OrderingFilter,)
    def get_queryset(self):
        queryset = Stocks.objects.all().order_by('date')
        return queryset
    def perform_create(self, serializer):
        serializer.save(user=self.request.user)

来自 React 的方法：

  const fetchStocks = async () => {
    try {
      const response = await axiosInstance.get('/stocks/?ordering=date')
      if (response) {
        setStocksInfo(response.data)
        console.log(response.data)
      }
    } catch (error) {
      throw error;
    }
  }

并从两个合并表中返回列表：

{productsInfo.map(products => {
                  const product = stocksInfo.filter(e => e.product_id === products.product_id);
                  return (
                    product.map((stock, i) => (
                      <tr key={i} className="table-data">
                        <td className="col-3"> {products.name}</td>
                        <td className="col-3">{stock.date}</td>
                        <td className="col-1">{stock.count}</td>
                      </tr>
                    ))
                  )
                })}

Answer 1

由于您想根据 Stocks 表进行排序，因此您应该首先从该数组中进行映射。

您可以进行这样的实现，在其中过滤股票，使其仅包含与 productsInfo 匹配的股票，然后对其进行映射。

{stocksInfo
    .filter(e => productsInfo.some(p => p.product_id === e.product_id))
    .map((stock, i) => {
        const products = productsInfo.find(e => e.product_id === stock.product_id);
        return (
            <tr key={i} className="table-data">
                <td className="col-3"> {products.name}</td>
                <td className="col-3">{stock.date}</td>
                <td className="col-1">{stock.count}</td>
            </tr>
        );
    })}

但是，由于这效率低下，我建议将两个数组组合起来，然后映射它们。您可以将它们与以下代码结合使用：

const combination = stocksInfo
    .map(item =>
        Object.assign(
            item,
            productsInfo.find(({product_id}) => product_id === item.product_id)
        )
    )
    .filter(item => item.name);

我还在这里添加了一个工作示例：

const stocksInfo = [
    {date: "date1", count: 1, product_id: 123},
    {date: "date2", count: 2, product_id: 321},
    {date: "date3", count: 3, product_id: 331},
    {date: "date4", count: 4, product_id: 341},
];
const productsInfo = [
    {name: "test4", product_id: 341},
    {name: "test2", product_id: 321},
];

const combination = stocksInfo
        .map(item =>
            Object.assign(
                item,
                productsInfo.find(({product_id}) => product_id === item.product_id)
            )
        )
        .filter(item => item.name);


const Example = ({title}) => {

 return (
        <div>
            previous way
            <table>
                {productsInfo.map(products => {
                    const product = stocksInfo.filter(e => e.product_id === products.product_id);
                    return product.map((stock, i) => (
                        <tr key={i} className="table-data">
                            <td className="col-3"> {products.name}</td>
                            <td className="col-3">{stock.date}</td>
                            <td className="col-1">{stock.count}</td>
                        </tr>
                    ));
                })}
            </table>
            new way
            <table>
                {combination.map((stock, i) => {
                    return (
                        <tr key={i} className="table-data">
                            <td className="col-3"> {stock.name}</td>
                            <td className="col-3">{stock.date}</td>
                            <td className="col-1">{stock.count}</td>
                        </tr>
                    );
                })}
            </table>
        </div>
    );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

table, td {
  border: 1px solid black;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>