React-Native + Redux : 무작위 수의 양식 필드

Question

나는 react-native, redux 및 saga에 대한 초보자이며 솔루션을 찾을 수없는 유스 케이스로 진행되었습니다. 상태를 속성에 매핑하고 액션, 감속기 및 사가 사이에서 상태를 전달하는 방법을 이해합니다. 지금까지 나에게 의미가 있습니다. 이것은 물건이 dicey하게되는 것처럼 보인 곳이다. 나는 주어진 시간에 데이터베이스에서 반환되는 것에 따라 다양한 형태의 양식 필드를 요구하는 양식을 가지고있다. 단지, 그러나, localPartsManufacturers 배열 객체의 수를 각는 것이다 나타낼 수 하나 개의 텍스트 필드를 필요로 carLotZipCode에 이름과

{ 
    name: ‘’, 
    vehicleMake: ‘’, 
    vehicleModel: ‘’, 
    carLotCity: ‘’, 
    carLotState: ‘’, 
    carLotZipCode: ‘’, 
    localPartsManufacturers: [{name: ‘’, address: ‘’, zipCode}] 
} 

모든 :

예를 들어

, 이제 나는이 같은 구조를 가지고 가정 해 봅시다 각 객체마다 고유 한 텍스트 필드 세트가 필요합니다. 필자는 필드를 상태에 매핑하고 상태를 속성에 매핑하는 것과 관련하여 어떻게 설명하겠습니까? 이 시나리오로 시작하는 방법에 대해 혼란스러워합니다. 필드가 고정되면 매핑을 프로젝트하는 방법을 이해합니다.

Answer 1

데이터가 백엔드에서 오는 그대로 유지합니다. 그렇게하면 정상화되는 것을 피할 수 있습니다. 나는 필드를 렌더링 할 때 더 똑똑해야한다고 생각합니다. 여기에 내가 제안하고있는 무슨이다 : 당신이 가게에서 그것을 가지고

function onTextFieldChange(name, index) { 
    // either name = `name`, `vehicleMake`, ... 
    // or 
    // name = `localPartsManufacturers` and `index` = 0 
} 

function createTextField(name, index) { 
    return <input 
    type='text' 
    name={ name } 
    onChange={() => onTextFieldChange(name, index) } />; 
} 

function Form({ fields }) { 
    return (
    <div> 
     { 
     Object.keys(fields).reduce((allFields, fieldName) => { 
      const field = fields[fieldName]; 

      if (Array.isArray(field)) { 
      allFields = allFields.concat(field.map(createTextField)); 
      } else { 
      allFields.push(createTextField(fieldName)); 
      } 
      return allFields; 
     }, []) 
     } 
    </div> 
); 
} 

Form

모든 데이터를 수신합니다. 그런 다음 필드가 배열인지 확인합니다. 배열 인 경우 내부의 필드를 반복하고 다른 속성 인 createTextField과 동일한 입력을 생성합니다. 여기서 까다로운 부분은 저장소의 데이터를 업데이트하는 방법입니다. 텍스트 필드 데이터가 변경되면 index을 전달합니다. 감속기에서 다음과 같이 작성해야합니다.

case FIELD_UPDATED: 
    const { name, index, value } = event.payload; 

    if (typeof index !== 'undefined') { 
    state[name][index] = value; 
    } else { 
    state[name] = value; 
    } 
    return state; 

Answer 2

목록, 맵, 세트 또는 다른 오브젝트를 Redux에 보관할 수 없습니다.

남은 것은 상태를 소품으로 매핑하는 방법과 사용 방법뿐입니다. 컬렉션의 단일 요소를 소품으로 매핑하는 대신 전체 컬렉션을 단일 소품으로 매핑 한 다음 렌더링 메서드에서 컬렉션을 반복합니다.

작업에서 파트 목록을 구성하는 양식 필드로 구성된 새로운 콜렉션을 다시 전달할 수 있습니다. 그런 다음 감속기가 컬렉션 자체를 대체합니다.

또는 파트 컬렉션에서 요소를 변경하면 해당 ID로 작업을 보내고 감속기의 컬렉션에서 해당 요소를 찾은 다음 변경된 요소를 바꾸거나 새 요소를 추가하거나 삭제할 수 있습니다.