在 React JS 中移除数组的所有元素

Question

我编写了一个由下拉列表的 onChange 事件触发的函数。一旦函数被触发，它会根据参数值从 rest API 加载数据。但是，我用来存储这些数据的数组在随后的下拉更改事件中没有被清除。因此，当用户多次更改下拉列表时，数组会随着之前加载的数据而增长。

例如：在第一个下拉列表中更改 => ['A','B','C'] 第二次下拉更改 => ['A','B','C','E','F','G'] 而不是 ['E','F','G']

我的代码如下：

onDropdownChange = (e) => {
    var newArray = [];

// To remove all the elements of newArray
    newArray.forEach((e1,idx, arr) => {
      
        newArray.splice(idx,1);
      
    });

    console.log(newArray);
    const url = 'https://abcdefgh...../' + e + '/readings?today';
    newArray = this.state.data.slice();
    axios.get(url).then(res => {
      var response_arr = res.data.items;
      res.data.items.forEach((item, index) => {
        newArray.push({ time: res.data.items[index].dateTime, TM: res.data.items[index].value })
      })
      
     let sortedArray = newArray.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
     this.setState({ data: sortedArray });
     this.fetchChart();
    });
  }
  fetchChart = () => {
    const { data } = this.state;
    return <CustomLineChart data={data} />
  }

  render(){
    const {items} = this.state;
    var data = [];
    const itemList = items.map(item => {
        return <tr key={item.dateTime+''+item.value}>
            <td style={{whiteSpace: 'nowrap'}}>{item.dateTime}</td>
            <td>{item.measure}</td>
            <td>{item.value}</td>
        </tr>
    });
    return (
      <div>   
              {this.fetchChart()}
              <CustomDropdownList changeLink={this.onDropdownChange.bind(this)} />
              
      </div>
  );


  }
}

export default Dashboard;

谁能帮我解决这个问题？

Answer 1

您正在使用

复制之前的数据

newArray = this.state.data.slice();

你不需要那个..事实上，如果你想创建一个带有新选项的新数组，你不需要这些。

Answer 2

您正在将结果添加到 newArray，开始时您尝试清除的是空的，然后将其设置为添加了额外数据的现有数据。另外，避免使用 var.

var newArray = [];

    // This is already empty
    newArray.forEach((e1,idx, arr) => {
      
        newArray.splice(idx,1);
      
    });

    // This will always be empty
    console.log(newArray);

    const url = 'https://abcdefgh...../' + e + '/readings?today';

    // Existing data, remove this
    newArray = this.state.data.slice();
    axios.get(url).then(res => {
      var response_arr = res.data.items;
      res.data.items.forEach((item, index) => {

        // This is where new data is being added to existing
        newArray.push({ time: res.data.items[index].dateTime, TM: res.data.items[index].value })
      })

在 React JS 中移除数组的所有元素

Remove all the elements of the array in React JS

javascript

ecmascript-6

reactjs