Как изменить порядок рендеринга на карте React - PullRequest
Новая
       40

Как изменить порядок рендеринга на карте React

0 голосов
/ 11 марта 2020

У меня простое задание, и я чувствую, что ответ на этот вопрос также прост. Но по какой-то причине я не могу обернуть голову вокруг этого. Я должен получить список вопросов из базы данных и отобразить их на сайте. Этот конкретный раздел да или нет вопросов. Когда я получаю вопросы из базы данных, большинство из них уже в порядке: «да», а затем «нет». Тем не менее, есть один, который перевернулся. Итак, мой вопрос, как мне перевернуть перевернутое в правильном порядке?

Честно говоря, я не очень старался, потому что, как я уже сказал, по какой-то причине я не могу обернуть голову вокруг этого. Но я знаю, что в базе данных вопросы имеют поле под названием 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
        }
    ]
}

Ответы [ 3 ]

1 голос
/ 11 марта 2020

Используйте 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));
0 голосов
/ 11 марта 2020

Вы можете легко реализовать функцию 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 идет первым).

Следуя этим правилам, вычитая порядок первого появившегося элемента из следующего, вы получаете правильный вывод для функция сортировки.

0 голосов
/ 11 марта 2020

Вы можете выполнить сортировку с атрибутом order вариантов выбора, например choices.items при рендеринге вариантов

...