로컬 상태의 구성 요소가 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) } />