React State с массивом

Question

В настоящее время я пытаюсь запустить функцию, которая извлекает массив ключей из конечной точки.Каждый раз, когда вызывается эта функция, я хочу, чтобы массив в моем состоянии очищался или сбрасывался, но он продолжает добавляться к оригиналу.Так что массив this.state.keys постоянно увеличивается с каждым запросом.Я новичок в React, поэтому, пожалуйста, будьте осторожны со мной.

import React, { Component } from 'react';
import './app.css';
import ReactImage from './react.png';
// import Networks from './Networks/Networks.js';
import Networks from './Networks/Networks.js';
import Button from './Button/Button.js';
import axios from 'axios'

export default class App extends Component {
  state = { 
  networks: [],
  selectedNetwork: "",
  keys: [],
};

getKeys = (networkId) => {
  console.log(this.state)
  fetch('/api/getKeys', {method:'get', headers: {'Access-Control-Allow-Origin': '*'}})
  .then(res => res.json())
  .then(keys => this.setState({
    keys: keys
  }));
}

toggleNetwork = () => {
  this.setState({selectedNetwork: document.querySelector('#funtime').value})
}
componentDidMount() {
  let networkList = [];
  fetch('/api/getNetworks')
    .then(res => res.json())
    .then(networks => this.setState({
      networks: networks.rval
  }));
}

render() {
  return (
    <div>
      {<Networks  toggleNetwork={() => this.toggleNetwork()}
                  networks={this.state.networks}/>}
      <Button state={this.state}
              value={this.state.selectedNetwork}
              clickAction={() => this.getKeys(this.state.selectedNetwork)}
              name="Get Keys"/>
      <img src={ReactImage} alt="react" />
    </div>
  );
}

}

Answer 1

Проблема была с бэкэндом ... сброс setState в пустой массив заставил меня понять это, но вам не нужно этого делать.setState должен перезаписать.

Answer 2

В вашем getKeys () сделайте this.setState ({keys: []}) в первой строке функции, прежде чем выполнять вызов для получения нового набора ключей.