Question

我正在尝试使用传入索引的拼接来删除数组的元素。

handleClick(index) {
    const array = ['el1', 'el2', 'el3', 'el4'];   
    array.splice(index, 1);
    this.setState({ data: array });          
}

它工作得很好，但结果是每次我触发handleClick以删除多个元素时，我都是从const数组的同一点开始的。我需要做的是以某种方式首先保存不包含任何元素的数组，并且当触发另一个handleClick时，它将在较小的数组上工作，即仅包含三个元素，仅包含两个元素，等等。如何实现呢？谢谢

Answer 1

您可以将data数组保持在组件状态，并在您的handleClick方法中将setState与一个新数组（该副本是data的副本）一起使用索引为index的元素已删除。

您可以在componentDidMount中从后端获取数据，并在请求完成后将其置于状态。

示例

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(["el1", "el2", "el3", "el4"]);
    }, 1000);
  });
}

class App extends React.Component {
  state = { data: [] };

  componentDidMount() {
    getData().then(data => {
      this.setState({ data });
    });
  }

  handleClick(index) {
    this.setState(prevState => {
      const data = [...prevState.data];

      data.splice(index, 1);

      return { data };
    });
  }

  render() {
    return (
      <div>
        {this.state.data.map((el, index) => (
          <button key={el} onClick={() => this.handleClick(index)}>
            {el}
          </button>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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>

<div id="root"></div>

在React.js中一个接一个地删除数组中的多个元素

1 个答案: