상태 비 저장 구성 요소가 작업 후 새 소품을받지 못함

Question

반응 구성 요소 인 ReorderComponent가 있는데 이는 redux 저장소에서 전달 된 목록을 렌더링합니다. 'Reorder reorder'의 Reorder 구성 요소에 목록을 래핑했으며 사용자가 목록의 순서를 변경하면 매장을 업데이트하는 소품으로 전달되는 dipatch 함수가 있습니다.

이 단계는 저장소 업데이트를 볼 수 있고 주 컨테이너가 재정렬 된 목록과 함께 새 상태를 수신하므로 정상적으로 완료됩니다.

그러나 ReorderComponent는 상태가 변경 될 때 소품을 업데이트하지 않습니다.

-RequestContainer.js

• ReorderComponent

  소품

-connects의 상태지도 dipsatch 상태를 수신한다 : -

구조는 다음과 같다 ReorderComponent.js

- 목록을 렌더링하고 재주문 이벤트를 처리하기 위해 props를받는 무단 구성 요소. 우리가 있기 때문에, 그 상태 변경 후, 벙어리 구성 요소의 소품을 업데이트하지 않았습니다 볼 수있는이 이미지에

import React from 'react' 
 
import CitiesListReorder from '../components/CitiesListReorder' 
 
import { connect } from 'react-redux' 
 
import { setCity, setOrder, removeCity, setNumDays, setPreferences } from '../actions' 
 

 
const mapStateToProps = state => { 
 
    console.log('passing as props:\ncities', state[Object.keys(state).length - 1].cities) 
 
    return { 
 
    cities: state[Object.keys(state).length - 1].cities, 
 
    fID: Object.keys(state).length -1, 
 
    preferences: state[Object.keys(state).length - 1].preferences, 
 
    } 
 
} 
 

 
const mapDispatchToProps = dispatch => { 
 
    return { 
 
    onRemoveClick: (fID, index) => { 
 
     dispatch(removeCity(fID, index)) 
 
    }, 
 
    onEditClick: (fID, value, index) => { 
 
     dispatch(setCity(fID, value, index)) 
 
    }, 
 
    onSetNumDays: (fID, index, days) => { 
 
     dispatch(setNumDays(fID, index, days)) 
 
    }, 
 
    onSetPrefences: (fID, pref_type, info) => { 
 
     dispatch(setPreferences(fID, pref_type, info)) 
 
    }, 
 
    onReOrder: (fID, prevIndex, nextIndex) => { 
 
     dispatch(setOrder(fID, prevIndex, nextIndex)) 
 
    } 
 
    } 
 
} 
 

 
const RequestContainer = connect(
 
    mapStateToProps, 
 
    mapDispatchToProps 
 
)(CitiesListReorder) 
 

 
export default RequestContainer

import React from 'react' 
 
import PropTypes from 'prop-types' 
 
import City from '../components/City' 
 
import removeCity from '../actions' 
 
import Preferences from './Preferences' 
 
import Reorder, { reorder, reorderImmutable, reorderFromTo, reorderFromToImmutable } from 'react-reorder'; 
 

 

 
const CitiesListReorder = ({ fID, cities, preferences, onRemoveClick, 
 
    onEditClick, onSetNumDays, onSetPrefences, onReOrder }) => { 
 
    console.log('inside cities list reorder') 
 
    return(
 
    <div> 
 
     <Reorder 
 
     reorderId="my-list" 
 
     reorderGroup="reorder-group" 
 
     component="ul" 
 
     placeholderClassName="placeholder" 
 
     draggedClassName="dragged" 
 
     lock="horizontal" 
 
     holdTime={100} 
 
     onReorder={ (event, prevIndex, nextIndex) => {onReOrder(fID, prevIndex, nextIndex)} } 
 
     autoScroll={true} 
 
     disabled={false} 
 
     disableContextMenus={true} 
 
     placeholder={ 
 
      <div className="custom-placeholder" /> 
 
     } 
 
     > 
 
     { 
 
      cities.map((city, index) => (
 
      <li key = {'li' + index} > 
 
       <City 
 
       key = {'city' + index} 
 
       cityIndex = {index} 
 
       city = {city} 
 
       flightID = {fID} 
 
       onRemoveClick = { onRemoveClick } 
 
       onEditClick = { onEditClick } 
 
       /> 
 
      </li> 
 
     )) 
 
     } 
 
     </Reorder> 
 
     {cities.length > 1 
 
     ? 
 
      <Preferences 
 
      fID = { fID } 
 
      numCities = { cities.length } 
 
      preferences = { preferences } 
 
      onSetPrefences = { onSetPrefences } 
 
      /> 
 
     : 
 
      null 
 
     } 
 
    </div> 
 
) 
 
} 
 

 
CitiesListReorder.propTypes = { 
 
    fID: PropTypes.number.isRequired, 
 
    cities: PropTypes.array.isRequired, 
 
    preferences: PropTypes.object.isRequired, 
 
    onRemoveClick: PropTypes.func.isRequired, 
 
    onEditClick: PropTypes.func.isRequired, 
 
    onSetNumDays: PropTypes.func.isRequired, 
 
    onSetPrefences: PropTypes.func.isRequired, 
 
    onReOrder: PropTypes.func.isRequired, 
 
} 
 

 

 
export default CitiesListReorder

아무것도 기록하지 않았다.

감속기 :

Answer 1

case SET_ORDER: 
 
     return { 
 
     ...state, 
 
     [action.fID]: Object.assign(
 
      {}, 
 
      state[action.fID], 
 
      {cities: setOrder(state[action.fID].cities, action.prevIndex, action.nextIndex)} 
 
     ) 
 
     } 
 
     
 
export function setOrder(cities, prevIndex, nextIndex){ 
 
    var first = cities[prevIndex] 
 
    var second = cities[nextIndex] 
 
    var newList = cities 
 
    newList[prevIndex] = second 
 
    newList[nextIndex] = first 
 
    return newList 
 
}

예, 당신의 setOrder 기능 상태를 돌연변이됩니다. 참조를 붙여 넣어 :이 함수에서

export function setOrder(cities, prevIndex, nextIndex){ 
    var first = cities[prevIndex] 
    var second = cities[nextIndex] 
    var newList = cities 
    newList[prevIndex] = second 
    newList[nextIndex] = first 
    return newList 
} 

, newList 여전히 cities 같이 같은 배열 가리키는. 이 작업을 제대로 수행하려면 복사본을 cities으로 만들어 사본을 수정해야합니다. 따라서 var newList = cities.slice()을 수행하면됩니다.

이것은 Redux 문서의 Immutable Update Patterns 페이지 (특히 "일반적인 실수 # 2")에서 언급 한 문제 중 하나입니다.

상태를 고정시키고 개발 과정에서 돌연변이를 감지 할 수있는 여러 유틸리티가 있습니다. 내 Redux addons catalog의 DevTools # Linting 섹션을 참조하십시오.