按字符串长度订购反应图？

Question

我有一个反应函数，它遍历一个对象，并返回一个带有从地图中提取的文本字符串的按钮。我想做的是按长度顺序返回文本字符串。

构建按钮的函数在这里：

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>
})

这应该返回按钮对象，但按从最短到最长的字符串顺序，但它不返回任何内容。任何想法为什么？

Answer 1

你忘记返回值了

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>);
});