스위치 네이티브 업데이트 다차원 상태 값

Question

기본적으로 액세스 수준 목록이 있습니다. 목록에 넣었고 각 목록 항목의 오른쪽에 스위치가 있습니다. 내가 달성하고자하는 것은 키가 눌려진 목록 항목의 내 상태를 업데이트하기 위해 onPress 이벤트를 갖는 것입니다.

목록 데이터 섹션. 나는 키 이름에 대한 통제권이 없다. 미안합니다.

accessList: 
Array(51) 
0: 
{FormID: 101, FormName: "ApplicationSettingCheckStoreID", FormDesc: "Activate Device", IsShow: true, Note: "ApplicationSettingCheckStoreID"} 
1: 
{FormID: 145, FormName: "GiftCardAddFundList", FormDesc: "Add Fund", IsShow: true, Note: "Add Fund"} 

방법

가 나는

<List> 
    { 
     this.state.accessList.map((v, k) => { 
      return (
       <ListItem key={v.FormID}> 
        <Row> 
        <Col size={80}> 
         <Text>{v.FormDesc}</Text> 
        </Col> 
        <Col size={20}> 
         <Switch 
          value={v.IsShow} 
          onValueChange={() => this._switchToggled(v)} /> 
         </Col> 
        </Row> 
       </ListItem> 
      ); 
     }) 
    } 
    </List> 

이 내가 제대로 채우기 위해 노력하고있는 부분 렌더링하지만 난 여러 번 실패했습니다.

_switchToggled = (listItem) => { 
     ... 
    } 

정말 감사드립니다. 고맙습니다.

Answer 1

상태 관리, 즉 accessList 컬렉션을 저장하는 용도로 사용하는 것은 무엇입니까?

이

_switchToggled = (listItem, index) => { 

    this.props.dispatch(actions.updateToggle({ index, IsShow: !listItem.isShow }); 
} 

귀하의 actions.js 파일은 다음과 같을 것이다 :

const updateToggle = (payload) => { 
    return { 
    type: "UPDATE_TOGGLE", 
    payload 
    }; 
}; 

귀하의 reducer는 것이 redux에서오고 있다면, 당신은 당신과 같이 업데이트 할 항목의 인덱스와 동작을 전달할 수 다음과 같이하십시오 :

const reducer = (state, action) => { 
    case "UPDATE_TOGGLE": 

    // create a copy of the data 
    let clone = state.accessList.slice(); 

    // mutate the single item 
    let item = clone[action.payload.index]; 

    let newItem = { 
     ...item, 
     IsShow: action.payload.isShow 
    }; 

    // splice it into the clone 
    let newAccessList = clone.splice(action.payload.index, 1, newItem); 

    return { 
     ...state, 
     accessList: clone 
    }; 

    default: 
    return state; 
}; 

감속기에서 실제로 작업 할 데이터 구조의 복사본을 만듭니다. 이렇게하면 Redux가 state을 직접 변경하지 말고 state이라는 새로운 표현을 반환해야한다는 원칙을 유지합니다. accessList 배열의 인덱스에 액세스하는 것이 유용하며 splice을 수행하고 isShow 상태가 업데이트 된 항목을 반환 할 수 있습니다. 이 예제를 통해 내가 더 이상 당신을 도울 수 있는지 알려주십시오.