Javascript 在React Redux上未更新本地状态的组件

我正在尝试创建一个独立组件

MultiSelect

（我知道有一些组件，但我想学习如何创建）

我创建它的方式是它将选定的值存储在其状态中

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

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

要选择的选项位于

道具

（有效）上，选择的选项位于

状态

（不更新）

---

如何使用处于状态的

selectedItems

的新值更新

MultiSelect

组件？或者，创建这样一个组件的推荐方法是什么？

我最终将

selectedItems

从

状态移动到
道具
，然后在
onChange
事件中选择元素，我从
道具
获取值，添加/删除更改的项并使用修改的数组调用
this.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

导出默认类MultiSelect.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“”，
隐藏：是的，
};
}
变更（项目）{
const selectedItems=[…this.props.selectedItems]；
const index=selectedItems.findIndex（element=>element.value===item.value）；
如果（索引！=-1）{
选择Editems.拼接（索引，1）；
}
否则{
选择editems.push（项目）；
}
this.props.onChange（selectedItems）；//容器
}
render（）{
返回(
...
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) } />

onChange（数据）{
this.props.dispatch（{type:'SetSelectedBoards'，data}）；
}
this.onChange（e）}/>
这是一个很好的解决方案，但如果您想在将来对道具更改做出反应，请查看
组件WillReceiveProps
方法。
onChange(data) {
  this.props.dispatch({ type: 'SetSelectedBoards', data });
}

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