如何更改 React 地图中的渲染顺序

Posted 2023-02-22

【中文标题】如何更改 React 地图中的渲染顺序

【英文标题】：How to change order of rendering in a React map

【发布时间】：2020-06-23 14:57:36

【问题描述】：

我有一个简单的任务，我觉得这个问题的答案也很简单。但由于某种原因，我无法绕过它。我应该从数据库中获取问题列表并将其显示在网站上。此特定部分是是或否问题。当我从数据库中获取问题时，大多数问题已经按顺序排列，“是”然后是“否”。但是，有一个被翻转了。所以我的问题是，如何将反转的顺序翻转到正确的顺序？

老实说，我没有尝试太多，因为就像我说的那样，出于某种原因，我无法理解它。但我确实知道，在数据库中，问题有一个名为 order 的字段，其中 yes 为 0，no 为 1。所以我猜我必须以某种方式使用它。

这是我呈现问题的代码，

state.surveyQuestions.map(question => (
    <span key=question.question.id>
        <FormLabel className=classes.label component="legend">question.question.label</FormLabel>
        <RadioGroup value=state.consent onChange=handleChange style= height: 'auto', padding: '10px' >
            question.question.choices.items.map(choice => (
                <FormControlLabel key=choice.order style= paddingTop: '1px'  value=choice.value control=<Radio /> label=choice.label />
            ))
        </RadioGroup>
    </span>
))

这是来自数据库的内容，

"choices": 
    "items": [
        
            "label": "No",
            "value": "\"value\":\"0\"",
            "dataUID": null,
            "description": "No",
            "order": 1,
            "goto": null
        ,
        
            "label": "Yes",
            "value": "\"value\":\"1\"",
            "dataUID": null,
            "description": "Yes",
            "order": 0,
            "goto": null
        
    ]

【参考方案1】：

使用Array.protoype.sort() 通过自定义函数对“选择”进行排序；

const data = [
    
        "label": "No",
        "value": "\"value\":\"0\"",
        "dataUID": null,
        "description": "No",
        "order": 1,
        "goto": null
    ,
    
        "label": "Yes",
        "value": "\"value\":\"1\"",
        "dataUID": null,
        "description": "Yes",
        "order": 0,
        "goto": null
    
];

// Full function for readability
function orderByOrderValue( a, b ) 
  if ( a.order < b.order )
    return -1;
  
  if ( a.order > b.order )
    return 1;
  
  return 0;


console.log(data.sort(orderByOrderValue));

// Or use the one-liner
// data.sort((a,b) => (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0)); 

【讨论】：

啊完美。正是我所需要的，非常有意义，谢谢。

【参考方案2】：

您可以在呈现选项时使用选项的order 属性进行排序，即choices.items

【参考方案3】：

您可以轻松实现sort 函数：

data.sort((a, b) => a.order - b.order);

如果 compareFunction(a, b) 返回小于 0，则将 a 排序到低于 b 的索引（即 a 排在第一位）。

如果 compareFunction(a, b) 返回 0，则保持 a 和 b 相对于彼此不变，但相对于所有不同的排序 元素。注意：ECMAscript 标准不保证这一点 行为，因此，并非所有浏览器（例如可追溯的 Mozilla 版本 至少到 2003 年）尊重这一点。

如果 compareFunction(a, b) 返回大于 0，则将 b 排序到低于 a 的索引（即 b 排在第一位）。

按照这些规则，如果您将第一个出现的元素的顺序与以下元素相减，您将得到排序函数的正确输出。