如何將值添加到React狀態的數組中

我有一個React Component，其中我有一個Form與多個Select s。這些Select組件的options作爲props傳遞給SearchComponent。如何將值添加到React狀態的數組中

我想選擇的選項存儲在本地state，並且一旦形式的Submit被按下它被髮送到傳遞函數爲prop父組件 - searchStatements。

由於選擇是多個，我有一個可以選擇和存儲在狀態的所有選項的數組。

class SearchComponent extends Component { 
    state = { 
     companies: [], 
     years: [], 
     currencies: [] 
    }; 

    render() { 
     return (
      <Form 
       onSubmit={(e) => { 
        this.props.searchStatements(this.state.years, 
          this.state.currencies,this.state.companies); 
       }} 
      > 
       <Select 
        multiple=true 
        value={this.state.companies} 
        options={this.props.companies} 
        onChange={(e) => this.handleSelectChange('companies', e)} 
       /> 
       <Select 
        multiple=true 
        value={this.state.years} 
        options={this.props.years} 
        onChange={(e) => this.handleSelectChange('years', e)} 
       /> 
       <Select 
        multiple=true 
        value={this.state.currencies} 
        options={this.props.currencies} 
        onChange={(e) => this.handleSelectChange('currencies', e)} 
       /> 
      </Form> 
     ); 
    } 

    handleSelectChange = (name, v) => { 
     if (name === 'currencies') { 
      const newArray = this.state.currencies; 
      newArray.push(v); 
      this.setState({'currencies': newArray}); 
     } else if (name === 'companies') { 
      const newArray = this.state.companies; 
      newArray.push(v); 
      this.setState({'currencies': newArray}); 
     } else if (name === 'years') { 
      const newArray = this.state.years; 
      newArray.push(v); 
      this.setState({'years': newArray}); 
     } 
    }; 
}

的initial state是這樣的 -

state = { 
    companies: [], 
    years: [], 
    currencies: [] 
};

當添加貨幣USD時，它應該成爲

state = { 
    companies: [], 
    years: [], 
    currencies: ['USD'] 
};

同樣，當一個貨幣GBP添加，它應該變成

state = { 
    companies: [], 
    years: [], 
    currencies: ['USD', 'GBP'] 
};

然而，在handleSelectChange()，增加了幾個選項後，就變成這樣的事情 -

state = { 
    companies: [['GOOGLE'], ['GOOGLE', 'FACEBOOK']], 
    years: [], 
    currencies: [['USD'], ['USD', 'GBP']] 
};

如何更改handleSelectChange()這樣，我的最終輸出看起來是這樣的 -

state = { 
    companies: ['GOOGLE', 'FACEBOOK'], 
    years: [], 
    currencies: ['USD', 'GBP'] 
};

來源

2017-09-14 yadav_vi

您是否調試過''handleSelectChange'方法中'v'的值？ – Sundeep

它給出一個數組 - 「[」USD「，」GBP「]'。 –

這意味着你正在向現有陣列推送一個數組，看到問題（也許是解決方案？） – Sundeep

因爲您在Select中使用了多個值，例如this.state.years是您選擇的所有年份的數組。因此，您應該分配選定的值（不是推/添加）。所以handleSelectChange方法應該是

handleSelectChange = (name, v) => { 
    this.setState({[name]: v}); 
};

來源

2017-09-14 10:44:36

你可以證明沒有ES6，我對它很新，因此它很難理解。 –

我這樣做 - 'const some = {};一些[名稱] = v; this.setState（some）;'它似乎工作。你能告訴我兩者之間的區別是什麼？ –

@yadav_vi實際上，我給出的方向是正確的，在我提供的'handleSelectChange'的實現中存在拼寫錯誤。你的解決方案是正確的，但使用ES6你可以使用更短的一個：'this.setState（{[name]：v}）' –

如何將值添加到React狀態的數組中

回答

相關問題