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

Question

I'm trying to create a standalone component MultiSelect (I know there are components out there but I want to learn how to do one).

I created it in a way it will store the selected values in its state.

I call it like this from my container:

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

When I dispatch an action I get the correct values for the container's props. My MultiSelect even display the correct options. However for some reason it doesn't update the selected values. In the container this.props.selectedBoards has the correct value, but the component doesn't get this update.

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

The options to select is on the props (which works) and the selected options is on the state (which doesn't get updated).

How can I make the MultiSelect component update with a new value for selectedItems which is in the state? Or what would be the recommended way to create a component like this?

Answer 1

I end up moving selectedItems from the state to the props , and then on the onChange event where elements get selected I'm getting the value from the props , adding/removing the changed item and calling this.props.onChange with the modified array.

Then on the container I'm dispatching an action with the new array so I can get a new state.

I solved it by delegating the task to keep track of selected items to the container.

MultiSelect:

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

Container:

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

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