我正在尝试通过单击按钮来更改带有地图的地图功能的项目数，但是单击时它不起作用答案

【问题标题】：I'm trying to change how many items a map function with map with a click of a button, but it doesn't work when clicked我正在尝试通过单击按钮来更改带有地图的地图功能的项目数，但是单击时它不起作用
【发布时间】：2018-10-03 19:08:42
【问题描述】：

  render(){
    let size = 5;
    let addFive = function(size){
        return size += 5
    }
  return(
     {pastTrackers.slice(0, size).map((pastTracker,index)=>{
         return(
            <li>LIST ITEM</li>
          )
      })}
     <Button onClick={this.addFive}>Show 5 More</Button>
   })

我正在对列表进行切片，因此它只显示数组的前五个项目，但是有一个按钮应该向数组中添加五个，但是当我单击它时不再添加。

【问题讨论】：

如果要触发另一个渲染，需要使用setState。
您正在尝试使用此实例 this.addFive 调用局部变量函数

标签： javascript reactjs typescript array.prototype.map

【解决方案1】：

您的函数 (addFive) 不会修改 size 变量。它只是返回它（即+ 5）。此外，大小应该是组件状态的一部分。如果不是，则更改它不会触发新的渲染周期。

【讨论】：

【解决方案2】：

render 不会再次执行，除非您修改组件的状态。 addFive 函数中的任何内容都不会修改其状态，因此 render 不会重新运行。

相反，您可以将大小保存在 this.state 中，然后使用

this.setState(prevState => ({ size: prevState.size + 5 }));

...更新它并触发重新渲染。

现场示例：

class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      size: 5,
      values: [
        "one", "two", "three", "four", "five",
        "six", "seven", "eight", "nine", "ten",
        "eleven", "twelve", "thirteen", "fourteen", "fifteen"
      ]
    };
    this.addFive = () => {
      this.setState(prevState => ({size: prevState.size + 5 }));
    };
  }
  render() {
    return <div>
      {this.state.values.slice(0, this.state.size).map(value => <span>{value} </span>)}
      <hr />
      <input type="button" onClick={this.addFive} value="+5" />
    </div>;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

（注意：Yes, you do need to use the callback version。this.setState({size: this.state.size + 1}) 是错误的，因为您正在根据现有状态设置新状态。）

【讨论】：

【解决方案3】：

let addFive = function(size) {
    this.setState(state => ({
        size: state.size + 5
    }));
}

只需使用 setState（它也接受一个函数作为输入）

【讨论】：

【解决方案4】：

constructor(...args)
{
  super(...args)
  this.state = {
    currentSize: 5
  }
}

get items() {
 pastTrackers.slice(0, this.state.currentSize)
} 

this.addFive() {
  this.setState({
    currentSize: this.state.currentSize + 5
  })
}

render(){
  return(
     {this.items.map((pastTracker,index)=>{
         return(
            <li>LIST ITEM</li>
          )
      })}
     <Button onClick={() => { this.addFive() }}>Show 5 More</Button>
   })

【讨论】：

因为状态更新可能是异步的，所以你不应该在 setState 调用中引用 this.state，而应该利用 setState function increaseSize (state, props) {return {score : state.size + 1}} 的函数 API