Django Rest框架与React顺序不工作

Question

我的应用程序中有一个列表，它是从两个相关的表(产品和股票)创建的。我想按日期订购商品，日期在Stocks表中。我的API返回有序列表，但在我的应用程序中，列表不是有序的。当我尝试通过任何产品字段进行排序时，它工作得很好-在react中也是如此。

我的观点:

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>