Ist es schlecht, this.setState() von this.setState() in React.js aufzurufen?

Question

Zum Beispiel, ich habe diese Art von Code:

class Example extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     value: "", 
     disabled: false, 
     isLoaderOpened: false 
    }; 
    } 

    render() { 
    return (
     <div> 
     <input 
      value={this.state.value} 
      onChange={this.onChange} 
      disabled={this.state.disabled} 
     /> 
     <button onClick={this.onClick}>Load</button> 
     {this.state.isLoaderOpened && <div>Loading</div>} 
     </div> 
    ); 
    } 

    onClick =() => this.fetchData(this.state.value); 

    onChange = e => this.setState({ value: e.target.value }); 

    fetchData = value => { 
    Promise.resolve() 
     .then(() => this.setState({ disabled: true },() => showLoader())) 
     .then(() => this.handleRequest(this.props.url, value)) 
     .then(res => 
     this.setState({ data: res.json() },() => this.hideLoader()) 
    ); 
    }; 

    showLoader =() => this.setState({ isLoaderOpened: true }); 

    hideLoader =() => this.setState({ isLoaderOpened: false }); 

    handleRequest = (url, value) => fetch(url + "?value=" + value); 
} 

Ist es schlimm, dass ich von setState Funktion aufrufen, die auch setState verwendet? Ich möchte häufig verwendete Methoden wiederverwenden und der Kürze halber ist es bequem, sie als Callbacks in setState zu übergeben.

Answer 1

Es ist wirklich nicht gut, setState() zweimal oder mehr anzurufen. In Ihrem Fall können Sie versuchen, eine param auf die hideLoader() und showLoader() Zum Beispiel passieren:

showLoader = (otherState = {}) => this.setState({ ...otherState, isLoaderOpened: true }); 

hideLoader = (otherState = {}) => this.setState({ ...otherState, isLoaderOpened: false }); 

dann können Sie den anderen Zustand übergeben Sie wollen Veränderung in die Methoden:

fetchData = value => { 
    Promise.resolve() 
     .then(() => this.setState({ disabled: true },() => showLoader())) 
     .then(() => this.handleRequest(this.props.url, value)) 
     .then(res => 
      this.hideLoader({ data: res.json() }) 
    ); 
};