Question

我想在上一页和下一页按钮的页面中而不是在一页上显示从用户那里获得的信息我喜欢在一页上显示每5个元素

const incomeItemShow = incomeContent.map(value => <SummaryItem key= 
{value.id} money={value} func={props.money} />);

incomeContent是一个数组，用于保存我从用户那里获得的数据，包括对象{id: 0, check: "in", number: "12000", text: "sometext"}

Answer 1

到目前为止您尝试了什么？
如果是我，乍一看，我会在状态中创建一个属性，类似于currentItemDisplayed，它是两个数字组成的数组。第一个元素是显示的incomeContent第一个元素的索引，而第二个元素是显示的incomeContent最后一个元素的索引。

然后，显示两个按钮，分别具有onClick={this.back}和onClick={this.forward}，这两个功能可能类似于：

back = () => {
  const currentItemDisplayed = Object.assign([], this.state.currentItemDisplayed);
  currentItemDisplayed[0] -= 5;
  currentItemDisplayed[1] -= 5;

  this.setState({currentItemDisplayed[0]});
}

forward = () => {
  const currentItemDisplayed = Object.assign([], this.state.currentItemDisplayed);
  currentItemDisplayed[0] += 5;
  currentItemDisplayed[1] += 5;

  this.setState({currentItemDisplayed[0]});
}

请注意：您应该涵盖已经显示前五个元素并单击“后退”按钮的情况。在这种情况下，back()不应在状态中保存[-5, 0]，否则会出错。

最后，在render()方法中，您应该编写如下内容：

render() {
  const currentItemDisplayed = this.state.currentItemDisplayed;
  const itemToDisplay = incomeContent.slice(currentItemDisplayed[0], currentItemDisplayed[1]);

  ..

  return (
    ..
    {itemToDisplay.map(item => <SummaryItem ... /> )}
    ..
  )
}

Answer 2

想法是使用内部index显示下一项。看起来像这样

const itemsToShow = incomeContent.slice(index, index + 5);

按钮prev和next将使索引增加或减少5或X。您可能需要查看分页，以解释其概念。

如何在页面中显示我从用户那里获得的信息？

2 个答案: