Question

我想打印一个分数列表，限制为5。最新分数在顶部。该应用程序是一个简单的计时器，用户可以按住按钮，松开然后点击“完成”！按钮以将分数设置为状态。当前，当单击“完成！”时，从scoreArray打印在应用程序上的分数会成倍地倍增。按钮。

目前已建议我尝试使用该代码，但是它不起作用。

使用得分设置状态：

onSubmit() {

                this.setState(prevState => ({
                    scoreArray:[this.state.scoreArray.concat(ms(this.state.time,{verbose: true})), ...prevState.scoreArray],
                    time:0,
                    submit:true

                  }));

在渲染器中我有这个：

{this.state.scoreArray.map(function(item,i){

          return (i < 5) ? <Text key={i}>{item}</Text> : null}).filter(x=>x)

          }

我希望分数列表将在顶部显示最新分数，将较旧的分数推向列表的下方，并且当分数极限> 5时，这些较旧的分数就会消失。

Answer 1

您再次在“ scoreArray”内部提供了一个数组，因此也提供了嵌套结构。尝试将setState调用更改为： `

 this.setState(prevState => ({
                    scoreArray:[ms(this.state.time,{verbose: true}), ...prevState.scoreArray],
                    time:0,
                    submit:true

                  }));

`

这样，您可以在数组顶部添加一个新元素，然后在新数组中散布先前的元素。

如何将数组限制为5个项目并将新项目放在列表顶部

1 个答案: