组件本地状态不反映在React Redux上更新

Question

我试图创建一个独立的组件MultiSelect（我知道那里有组件，但我想学习如何做一个）。

我创建它的方式，它将存储所选值的状态。

我这样称呼它从我的容器：

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

当我派遣一个动作，我得到了集装箱的道具正确的价值观。我的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

我最终移动从stateselectedItems到props，然后在其中的元件都被选择我是从props获取值，添加/删除更改项并调用this.props.onChange与改性阵列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) } />