Заказ карты реакции по длине строки? - PullRequest
Новая
       95

Заказ карты реакции по длине строки?

0 голосов
/ 08 мая 2020

У меня есть функция реакции, которая выполняет итерацию по объекту и возвращает кнопку с текстовой строкой, извлеченной с карты. Я хотел бы вернуть текстовые строки в порядке длины.

Функция, которая создает кнопку, находится здесь: 

var answersS = answerState && answerState.map(({Answer, AnswerPayload, NextQuestion}, i)=>(
                    answerArray.push(Answer),
                    answerArray.sort(function(a, b){return a.length - b.length}),
                    console.log(answerArray),
                    console.log(answerState),
                    <Grid item key={i}>
                       <Button key={i} value="check" selected={determineStyle(i)} id={i.toString()} className={classes.button} variant="outlined" color="primary">{Answer}
                       </Button>
                    </Grid>
                ))
return answersS

Итак, карта answerState возвращает объект, который выглядит так:

0: Object { Answer: "18-24", AnswerPayload: "1000AA", NextQuestion: 2, … }

и

1: Object { Answer: "25-50", AnswerPayload: "1000AB", NextQuestion: 2, … }

вы уловили суть ..

Итак, я пытаюсь настроить кнопки так, чтобы самая короткая строка «Ответ» была первой.

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

answerArray.push(Answer), answerArray.sort(function(a, b){return a.length - b.length})

Это возвращает правильно отсортированный массив:

Array(8) [ "50+", "18-24", "25-50", "Skip to ACL objectives", "Skip to LCL objectives", "Skip to MCL objectives", "Skip to PCL objectives", "Skip to meniscus objectives" ]

Что отлично работает. Затем я попытался использовать функцию forEach для перебора этого массива следующим образом: 

answerArray.forEach((data)=>{
    <Grid item key={i}>
        <Button key={i} value="check" selected={determineStyle(i)} id={i.toString()} className={classes.button} variant="outlined" color="primary">{data}
        </Button>
    </Grid>
})

Это должно вернуть объекты кнопок, но в порядке от самой короткой до самой длинной строки, но ничего не возвращает. Есть идеи, почему?

1 Ответ

0 голосов
/ 08 мая 2020

Вы забыли вернуть значение 

answerArray.map((data)=>{
  return (<Grid item key={i}>
    <Button key={i} value="check" selected={determineStyle(i)} id={i.toString()} className={classes.button} variant="outlined" color="primary">{data}
    </Button>
   </Grid>);
});
...