배열에서 항목 삭제 (React-Native + Redux)

Question

나는 사용자와 함께 체크리스트를 가지고 있으며 체크 박스를 클릭하면 사용자가 InputField에 추가하거나 InputField에서 삭제해야한다.

현재는 ADD로만 작동합니다.

import { handleActions } from 'redux-actions'; 
import * as types from '../actions/actionTypes'; 

export const initialState = { 
    members: '', 
}; 

const addMembers = (members, id) => { 
    const res = members ? `${members},${id}` : `${id}`; 
    return res; 
} 

export default handleActions(
    { 
    [types.ADD_GUEST]: (state, action) => ({ 
     ...state, 
     members: addMembers(state.members, action.payload), 
    }), 
    }, 
    initialState 
); 

가 내 감속기를 변경하는 방법, 알려 주시기 바랍니다 :

import ... 

export default class NewEvent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.onSelect = this.onSelect.bind(this); 
    } 

    onSelect = id => { 
    addMembers(id) } 

    findSelectedContacts = (contacts, membersArray) => { 
    const newArr = []; 
    contacts.forEach(item => { 
     if(membersArray.indexOf(item.id.toString()) > -1) { 
     newArr.push(` ${item.name}`) 
     } 
    }); 
    return newArr; 
    } 

    render() { 
    const { navigation, members, location, contacts } = this.props; 
    const membersArray = members ? members.split(',') : []; 
    const selectedArray = this.findSelectedContacts(contacts, membersArray) 
    const inputFill = selectedArray.join().trim(); 
    return (

      <InputField 
       customStyle={[eventStyles.input]} 
       icon="addGuest" 
       placeholder="Add guests" 
       onGetText={texts => { 
       this.handlerChangeText(texts) 
       }} 
       value={inputFill} 
      /> 
    ); 
    } 
} 

또한, I는 입력에 손님을 추가 감속기를 가지고? 하나를 클릭하면 InputFiled에서 사용자를 추가하거나 삭제해야합니다.

Answer 1

현재 회원 목록을 쉼표로 구분 된 문자열로 저장하고있는 것으로 보입니다. 더 나은 옵션은 목록을 실제 배열로 저장 한 다음 해당 형식으로 필요한 경우이를 문자열로 변환하는 것입니다 (예 : 표현.

는 다음과 같이 보일 수에 대한 (기존 코드 스타일에 따라하려고 감속기 :

export const initialState = { 
    // initialState changed to array 
    members: [], 
}; 

const addMember = (members, id) => { 
    // add id to the end of the list 
    return members.concat(id); 
} 

const removeMember = (members, id) => { 
    // return a new list with all values, except the matched id 
    return members.filter(memberId => memberId !== id); 
} 

export default handleActions(
    { 
    [types.ADD_GUEST]: (state, action) => ({ 
     ...state, 
     members: addMember(state.members, action.payload), 
    }), 

    [types.REMOVE_GUEST]: (state, action) => ({ 
     ...state, 
     members: removeMember(state.members, action.payload), 
    }), 
    }, 
    initialState 
); 

을 그리고 당신은 다음 구성 요소 render() 방법, 문자열로 목록을 필요로하는 경우 -에서, 양호하게 나 반응-REDUX mapStateToProps 선택기를 사용하면 문자열로 변환 할 수 있습니다 :? 내가 알 수있는 바와 같이

memberList = state.members.join(',')