Reduxの中でアクションにパラメータを渡す

Question

が、これは私のアクション

export function removeColor(color) { 
    return { 
    type: C.REMOVE_COLOR, 
    payload: color 
    } 
} 

です（：：SETSTATE（...）警告時に更新できません。既存の）これは私の減速である

export default function(state = [], action) { 
    switch (action.type) { 
    case C.REMOVE_COLOR: 
    return [...state.slice(action.payload + 1)] 
    } 

    return state 
} 

これは私はアクションをディスパッチします。色を表示する呼び出しは、インデックスをアクションに渡す配列から色を削除します。

removeColorFromArray(index) { 
    this.props.removeColor(index) 
    } 

    displayColors(color, index) { 
    return(
     <ul key={index}> 
     <li>{color}</li> 
     <button onClick={this.removeColorFromArray(index)}>Remove Color</button> 
     </ul> 
    ) 
    } 

    render() { 
    return(
     <div> 
     <div>Colors</div> 
     <button onClick={this.props.showColorForm}>Add Color</button> 
     <ColorForm /> 
     { this.props.colors.map(this.displayColors) } 
     </div> 
    ) 
    } 

私は継続的にこの警告

Warning: setState(...): Cannot update during an existing state transition (such as withinレンダリング取得). Render methods should be a pure function of props and state.

私が選択した項目の配列位置を取り、状態から削除されてやろうとしているが、困難な時期を持っていますこれを達成する。私はどこが間違っているのか、私は違うことができるのか分かりますか？

Answer 1

変更し、この文字列：

<button onClick={this.removeColorFromArray(index)}>Remove Color</button> 

へ：

<button onClick={this.removeColorFromArray.bind(this, index)}>Remove Color</button> 

あなたは、イベントの小道具（onChange、onFocusなど）の関数、関数呼び出しのない結果に渡す必要があります。

Answer 2

または矢印機能を使用します。

<button onClick={this.removeColorFromArray(index)}>Remove Color</button> 

へ：

<button onClick={() => this.removeColorFromArray(index)}>Remove Color</button>