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

【问题标题】：How to change order of rendering in a React map如何更改 React 地图中的渲染顺序
【发布时间】：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
        }
    ]
}

【问题讨论】：

标签： reactjs graphql conditional-rendering

【解决方案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 排在第一位）。

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

【讨论】：