React Redux 무한 루프

Question

사용자가 입력 막대를 업데이트 할 때 내 나머지 API로 가져 오기를 수행 할 의사가 있습니다. 내가 겪고있는 문제는 componentDidUpdate 메서드가 json을 감속기로 보내고 상태를 업데이트하고 componentDidUpdate를 다시 호출하는 작업 작성자를 호출한다는 것입니다. 끝없는주기를 끝내기위한 아이디어 또는 모범 사례? 감사!

액션 작성자 :

export const fetchFoods = (dispatch, searchText) => { 
    return fetch(`/nutrition/${searchText}`) 
    .then(res => res.json()) 
    .then(json => dispatch({type: 'RECEIVE_FOODS', json})) 
} 

감속기 :

const foods = (state = [], action) => { 
    switch (action.type) { 
    case 'RECEIVE_FOODS': 
     return action.json 
    default: 
     return state 
    } 
} 

반응 컨테이너 :

const FoodList = React.createClass({ 
    componentDidUpdate: function() { 
    fetchFoods(this.props.dispatch, this.props.searchText) 
    }, 
    componentWillMount: function() { 
    fetchFoods(this.props.dispatch, this.props.searchText) 
    }, 
    render: function() { 
    ... 
    } 
}) 

export default connect(
    (state) => { 
    return {searchText: state.searchText, foods: state.foods} 
    } 
)(FoodList) 

Answer 1

당신은 componentDidUpdate에서 fetchFoods 기능을 제거해야합니다. 업데이트에서 함수를 호출하면 설명하는 것처럼 무한 루프가됩니다.

구성 요소가 처음 탑재되고 원래 데이터 집합을 가져 오면 명시 적으로 필요한 경우에만 작업을 호출해야합니다. 사용자가 변경하면 다른 함수가 변경합니다.

Answer 2

입력에 변경 사항이 적용될 때마다 onChange() 핸들러를 입력 (또는 업데이트를 트리거하려는 항목)에 연결하여 명시 적으로 디스패치하는 함수를 호출합니다. 그 행동.

https://jsfiddle.net/julianljk/69z2wepo/49105/

기능 :

handleChange: function (e) { 
    var myInput = e.target.value; 
    this.setState({ 
     value: myInput 
    }); 
    fetchFoods(this.props.dispatch, myInput) //sends it to the store, 
},   

가 렌더링 : 라이프 사이클 방법에 액션 파견 퍼팅

render: function(){ 
    return( 
     <div> 
      <input type="text" value={this.state.value} onChange={this.handleChange}/> 
     </div> 
)}  

일반적 행동의이 종류가 발생할 수 있습니다.