reactjs - react : duplicated item in list

Question

我绝对是 React 的初学者。我创建了一个简单的应用程序来在页面上显示整数列表。有一个“添加项目”按钮，当用户按下按钮时，应用程序会向列表中添加一个新整数。当我按下按钮时，新整数会两次添加到列表中。谁能帮忙？

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      idx: 0
    }

    this.addItem = this.addItem.bind(this);
  }

  render() {
    return <div><h1>Learning app</h1>
    <ul>
      {this.state.items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
    <button onClick={this.addItem}>Add Item</button>
    </div>;
  }

  addItem() {
    this.setState((state, props) => {
      state.items.push(state.idx)

      return {
        items: state.items,
        idx: state.idx + 1
      }
    })
  }
}

export default App;

当我把它放在 addItem 中时

    this.state.items.push(this.state.idx);
    this.setState({
      idx: this.state.idx + 1
    })

它没有任何问题。

出于实验目的，我特意使用带有箭头功能的 setState。我做错了什么吗？

Answer 1

你可以试试这个，它会在列表中添加一个项目

addItem = () => {
    this.setState({
      items: [...this.state.items, this.state.idx],
      idx: this.state.idx + 1,
    });
  };