时间戳

首页 > 解决方案 > 以非完整顺序对字符串数组进行排序（确保元素 X 是第一个，但对其他所有内容执行任何操作）

javascript - 以非完整顺序对字符串数组进行排序（确保元素 X 是第一个，但对其他所有内容执行任何操作）

问题描述

在flask-react-app-tutorial之后，我试图将数据从我的简单server.py推送到App.js中，并将其显示在一个漂亮的表格中。

我使用了material-ui 表格中最简单的表格布局，并尽可能多地对其进行了调整，使其成为动态的，并且数据将仅由服务器控制，这意味着我可以添加/删除条目（行）或条目参数（列）就在服务器中。

我的问题"TODO"在代码中的注释中有描述，但我会在这里重写：

应用程序.js

import React, { useState, useEffect } from 'react';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';


export default function SimpleTableDisplayingServerData() {
    const [ data, SetData ] = useState(0);

    // TODO: (0) How can I make sure the data from useEffect is sorted? (at least have the "Name" column as the 1st column)
    // TODO: (0.0) How can I get the headers (like I did in the <TableHead>) as a const?
    // TODO: (0.1) How can I create a non-strict ordering in an array of strings? (i.e. make sure "A" is first, "D" is last, but all others can be wherever)
    // TODO: (0.2) Given that ordering, how can I order all my keys / values mappings (in the <TableRow>) accordingly?
    useEffect(() => {
        fetch('/bla').then(result => result.json()).then(d => {
            SetData(d)
        })
    }, [])

    return (
        <TableContainer component={Paper}>
            <Table size="small" aria-label='simple table'>
                <TableHead> <TableRow> { Object.keys(data).map(k => <TableCell align='left'>{k}</TableCell> )} </TableRow> </TableHead>
                <TableRow> { Object.values(data).map(v => <TableCell align='left'>{v}</TableCell> )} </TableRow>
            </Table>
        </TableContainer>
    );
}

服务器.py

#!/usr/bin/env python

from flask import Flask
from random import randint, random

app = Flask(__name__)

def create_entry():
    name = 'bla' + str(randint(0,20))
    cal = random()
    fat = random()
    carb = random()
    prot = random()

    return {
        "Name": name,
        "Calories": cal,
        "Fat": fat,
        "Carbs": carb,
        "Protein": prot,
    }

@app.route('/bla')
def bla():
    return create_entry()

标签： javascriptpythonreactjssorting

解决方案

您可以为所需的项目顺序获取一个对象，并仅使用最左边和最右边的值。对于所有其他（未知）值取零。

const
    order = { a: -Number.MAX_VALUE, c: Number.MAX_VALUE },
    values = ['b', 'c', 'a', 'd'];
    

values.sort((a, b) => (order[a] || 0) - (order[b] || 0));

console.log(...values);

推荐阅读