Question

每当按住一个按钮并且“完成！”时，我的应用程序当前会显示时间列表。按下按钮。列表继续显示在屏幕外，因此我想在列表顶部添加一个新时间，并将列表限制为仅5个项目。

我尝试过.unshift和.pop，但是因为列表以状态存储，所以我不应该改变状态！因此，我决定可以通过配置.map显示的内容在渲染中完成此操作。

这是“提交”按钮功能：

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

以下是渲染器：

<Button onPress={this.onSubmit} title="Done!"/>
  {this.state.scoreArray.map(function(item, i) {
    return <Text key={i}>{item}</Text>
  })}

我可以在此.map上添加5个限制，并将其添加到列表顶部吗？

Answer 1

要使新元素排在最前面，而不是改变原始元素，可以使用扩展运算符，例如

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

限制为5，请使用

更新代码

this.state.scoreArray.map(function(item, i) {
  return (i < 5) ?<Text key={i}>{item}</Text> : null 
}).filter(x=>x)

如何设置此.map（）仅输出5个项目，并将新项目添加到列表顶部

1 个答案: