ローカルの状態のコンポーネントがReact Reduxで更新されない

Question

私はスタンドアロンコンポーネントMultiSelectを作成しようとしています（そこにはコンポーネントがありますが、その方法を学びたいと思います）。

選択した値をその状態に保存する方法で作成しました。

私は私のコンテナから、このようにそれを呼び出す：私は、コンテナの小道具のための正しい値を取得するアクションをディスパッチすると

<MultiSelect 
    items={ this.props.boards } 
    label="Boards" 
    value={ this.props.selectedBoards } 
    onChange={ e => this.onChange(e) } /> 

。 My MultiSelectは、正しいオプションを表示することさえできます。しかし何らかの理由で、選択した値は更新されません。コンテナ内のthis.props.selectedBoardsには正しい値がありますが、コンポーネントはこの更新を取得しません。

export default class MultiSelect extends React.Component { 
    constructor(props) { 
    super(props); // props.items = all options to select 

    this.state = { 
     selectedItems: props.value || [], // selected options (problem) 
     search: '', 
     hidden: true, 
    }; 
    } 

    render() { 
    return (<div> 
     ... 
     this.state.selectedItems 

選択するためのオプションがpropsである（これは動作します）と、選択したオプションは、（更新されません）stateです。

MultiSelectコンポーネントのアップデートに、状態にあるselectedItemsの新しい値を設定するにはどうすればよいですか？または、このようなコンポーネントを作成するための推奨方法は何ですか？

Answer 1

は私がpropsにstateからselectedItemsを動かしてしまうと、その後の要素は、私が追加/変更されたアイテムを削除し、修正された配列を持つthis.props.onChangeを呼び出し、propsから値を取得しています選択しますonChangeイベントで。

次に、私は新しい状態を得ることができるように、私は新しい配列でアクションをディスパッチしています。

私は、選択したアイテムをコンテナに追跡するタスクを委任して解決しました。

複数選択：

export default class MultiSelect extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     search: '', 
     hidden: true, 
    }; 
    } 

    onChange(item) { 
    const selectedItems = [ ...this.props.selectedItems ]; 

    const index = selectedItems.findIndex(element => element.value === item.value); 

    if (index !== -1) { 
     selectedItems.splice(index, 1); 
    } 
    else { 
     selectedItems.push(item); 
    } 

    this.props.onChange(selectedItems); // container 
    } 

    render() { 
    return (<div> 
     ... 
     this.props.selectedItems 

コンテナ：

onChange(data) { 
    this.props.dispatch({ type: 'SetSelectedBoards', data }); 
} 

<MultiSelect 
    items={ this.props.boards } 
    label="Boards" 
    selectedItems={ this.props.selectedBoards } 
    onChange={ e => this.onChange(e) } />