반응 구성 요소를 다시 렌더링하면서 상태 및 소품 변경 이해

Question

예상대로 렌더링되지 않는 구성 요소가 있습니다. 이 구체적인 예에 ​​대해 덜 관심있는 점은 반응 - 반복 수명주기에서 상태, 소품, 업데이트, 재 렌더링 및 기타 기능이 어떻게 발생하는지 더 잘 이해하는 것입니다.

현재 코드는 위치 목록이있는 전달을 만드는 것에 관한 것입니다. 주요 문제는 위치의 일정을 재정렬하는 것이 효과가없는 것입니다. 즉, 감속기의 상태는 올바르게 업데이트되지만 구성 요소는 다시 렌더링되지 않습니다.

{console.log("Rendering...")} 
{console.log(delivery.locations)} 
{delivery.locations.map((location, index) => (
    <div key={index}> 
     <LocationSearch 
      {...location} 
      total={delivery.locations.length+1} 
      index={index} 
     /> 
    </div> 
))} 

console.logs 어디서 정확한 데이터를 출력 :

이 delivery.js의 관련 단편, 위치 목록의 각 위치를 표시 LocationSearch 맞춤 성분을 사용하는 성분 인 예상했을 때. LocationSearch 내에서 위치를 재정렬하는 작업이 트리거되면 콘솔 로그는 데이터가 올바르게 업데이트 된 위치 목록을 출력합니다. 그러나 구성 요소가 업데이트 된 내용을 표시하지 않습니다. 내가 혼란스러워 곳

export class LocationSearch extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      searchText: this.props.address 
     } 
     this.handleUpdateInput = this.handleUpdateInput.bind(this) 
    } 

    handleUpdateInput (searchText) { 
     this.setState({ 
      searchText: searchText 
     }) 
     this.props.handleUpdateInput(searchText) 
    } 

    render(){ 
     const { type, itineraryOrder, floors, elevator, accessDistance, index} = this.props 
     return (
      ...display all the stuff 
     ) 
    } 
} 
...map dispatch, connect, etc... 
function mapStateToProps(state, ownProps) { 
    return { 
     suggestions: state.delivery.suggestions, 
     data: ownProps.data 
    }; 
} 

이것은 - 내가 componentWillUpdate의 라인을 따라 뭔가를 의미하고있어 그림,하지만 좋은를 찾을 수 없습니다 : 여기

는 LocationSearch 구성 요소의 일부 관련 부분입니다 각 단계에서 일어나는 일에 대한 설명. 거기에 this.props = nextProps을 그냥 설정합니까? this.props가 부모 구성 요소에서 이미 전달되면 업데이트해야하지 않습니까? 어떻게 대부분의 구성 요소가 스스로 재 렌더링하는 것처럼 보입니까?

좋은 자료를 제공하거나 도움이되는 도움을 주신 데 대해 감사드립니다. 미리 감사드립니다!

Answer 1

나는 이런 종류의 문제에 직면했다. 이미 react-redux를 사용하여 언급 한 것을 고려하면 컨테이너/구성 요소 구조로 전환하고 componentWillUpdate()를 잊어 버리는 것일 수도 있습니다.

기본적으로 실제 프랭크를 실제 구성 요소로 전달하는 것만 가능합니다. HTML을 사용하므로 소품을 손으로 교체 할 필요가 없습니다.

컨테이너이

import React from 'react' 
import { connect } from 'react-redux' 
import PresentationalComponent from 'components/PresentationalComponent' 

const Container = props => <PresentationalComponent {...props} /> 

export default connect(state => ({ 
    searchText: state.UI.searchText, 
    locations: [...], 
}), dispatch => ({ 
    handleUpdateInput: e => dispatch({ 
     type: "CHANGE_SEARCH_TEXT", 
     text: e.target.value, 
    }), 
}))(Container) 

같은 그리고 당신의 표현 적 요소가 될 수

import React from 'react' 

const PresentationalComponent = ({ searchText, locations, handleUpdateInput }) => 
<div> 
    {locations.map(location => <p>{location}</p>)} 
    <input defaultValue={searchText} type="text" onChange={handleUpdateInput} /> 
</div> 

export default PresentationalComponent