用数组反应状态答案

【问题标题】：React State with array用数组反应状态
【发布时间】：2019-03-27 01:08:01
【问题描述】：

目前我正在尝试运行一个从端点提取键数组的函数。每次调用此函数时，我都希望清除或重置状态上的数组，但它会一直附加到原始数组。所以 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>
  );
}

}

【问题讨论】：

标签： reactjs state setstate

【解决方案1】：

在您调用 getKeys() 之前，在函数的第一行执行 this.setState({keys: []}) 以获取新的一组键。

【讨论】：

【解决方案2】：

问题出在后端...将 setState 重置为空白数组让我意识到这一点，但您不需要这样做。 setState 应该覆盖。

【讨论】：