응답에 대한 구성 요소 필터링 네이티브

Question

피드에 표시 할 뉴스를 걸러 내기 위해 필터링 확인란 목록 옵션을 만들려고합니다. 내 응용 프로그램은 아직 데이터베이스에서 정보를 얻지 못하기 때문에 기본적으로 메서드를 테스트하기 위해 만듭니다.

내가 가진 변수는 주제 (주 소품)이며 feedNews, topics는 사용자가 피드에서 보려는 주제가있는 배열이며 feedNews는 표시 할 모든 뉴스 구성 요소입니다 피드.

주제 중

this.state = { 
    topics: ['News-1','News-2','News-3'] 
} 

feedNews

const feedNews = [ 
    {name:'News-1', comp: <FeedNews key={101} name="News-1" />}, 
    {name:'News-2', comp: <FeedNews key={102} name="News-2" />}, 
    {name:'News-3', comp: <FeedNews key={103} name="News-3" />}, 
    {name:'News-1', comp: <FeedNews key={104} name="News-1" />}, 
    {name:'News-3', comp: <FeedNews key={105} name="News-3" />} 
] 

참고 구성 요소 : 각 구성 요소의 키 단지 테스트 기본적으로 내 클래스의 렌더링 구성 요소의 필터링 된 배열을 반환하는 함수를 호출에 어떤

위해이었다 :

filterFeedNews(){ 
    let topics = this.state.topics; 
    return feedNews.filter((item) => { 
     return topics.indexOf(item.name)!==-1; 
    }).map(item => item.comp); 
} 

지금이 기능은 내가 처음으로 응용 프로그램을 열하지만 실제로 내 필터 옵션 (체크 박스의 목록)를 주제 배열을 변경하는 경우, 때때로 사라 옵션이 있습니다 그들이 아니었다마다 작동 내가 선택한 옵션. BTW, 업데이트 필터 기능이 있습니다 :

이 기능은 작업으로 내 질문은

onClick(){ 
    this.action(this.name, !this.state.value); 
    this.setState({ 
     value: !this.state.value, 
    }); 
} 

(때문에 소품의 이름으로) 각각의 체크 박스 내에서 결합에 의해 불려

updateFilter(newsName, value){ 
    let newNewsTopics = this.state.topics; 
    if(value){ 
     newNewsTopics.push(newsName); 
    }else{ 
     newNewsTopics.splice(newNewsTopics.indexOf(newsName),1); 
    } 
    this.props.dispatch(setNewsFilter(newNewsTopics)); 
    this.setState({ 
     newsTopics: newNewsTopics, 
    }); 
} 

, 내가 뭘입니다 그 기능에 대해 잘못된 행동을하거나, 반응 네이티브에서이 현상이 발생하는 것이 정상적인가?

추 신 : 주제 당 뉴스가 하나뿐이라도 문제가되지 않습니다. 이 내용은 주제 당 두 개 이상의 뉴스가있을 때 작동하지 않습니다

UPDATE 나는이 문제이지만, 문제가있는 경우 대신 필터링의 ListView의있는 ScrollView되는 있는지 확실하지 않습니다

및

그래서 기본적으로 주요 문제는 더 연구의 관점에서조차 필터링 렌더링 목적

render(){ 
     return (
      <View style={styles.root}> 
       <Toolbar home={true} options={true} title='Feed' actionOptions={this.optionsAction.bind(this)}/> 
       <View style={styles.flexContainer}> 
        <ScrollView style={styles.flexContainer}> 
         {this.filterFeedNews()} 
        </ScrollView> 
       </View> 
       <View style={styles.spacing} /> 
       {this.options()} 
      </View> 
     ); 
    } 

솔루션이었다 구성 요소의 집. 동료의 도움을 받아 위에 게시 한 구조를 약간 변경해야했습니다. 변경하는 것 :

const feedNews = [ 
    {name:'News-1', ...otherProps}, 
    {name:'News-2', ...otherProps}, 
    {name:'News-3', ...otherProps}, 
    {name:'News-1', ...otherProps}, 
    {name:'News-3', ...otherProps} 
]; 

는

dataSource: ds.cloneWithRows(feedNews), 

내 필터 공급 기능이 생각

filterFeedNews(){ 
     let topics = this.state.newsTopics; 
     let feed = feedNews.filter((item) => { 
      return topics.includes(item.name); 
     }); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.setState({dataSource: ds.cloneWithRows(feed)}); 
    } 

내 업데이트 필터의 새로운 방식에 적응뿐만 아니라 변경되었습니다 내 상태로 데이터 소스를 추가 액션도 변경해야했습니다.

updateFilter(newsName, value){ 
     let newNewsTopics = this.state.topics; 
     if(value){ 
      newNewsTopics.push(newsName); 
     }else{ 
      newNewsTopics.splice(newNewsTopics.indexOf(newsName), 1); 
     } 
     this.props.dispatch(setNewsFilter(newNewsTopics)); 
     this.setState({ 
      newsTopics: newNewsTopics, 
     },() => this.filterFeedNews()); 
    } 

01 23,516,

하고있는 ScrollView 대신 렌더링 내의 IT 지금의 ListView를 가지고

<ListView 
     style={styles.flexContainer} 
     dataSource={this.state.dataSource} 
     removeClippedSubviews={false} 
     renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)} 
     enableEmptySections={true} 
/> 

프로 : 내가 사용 LayoutAnimation : 내가 내 이전 방법

콘과 함께했던 문제가 발생하지 않는 구성 요소가 업데이트 될 때마다 ListView에서 작동하지 않으므로 피드의 뉴스에 사진이있는 경우 사용자는 필터링에 대한 피드백 만받습니다.

솔루션 내가 스크롤보기 내 초기 접근 방식을 유지하려는 경우 경우있는 ScrollView

을 유지, 내 솔루션은 반면, 기본적으로 this.state.topics는 구조 (문자열 배열)를 유지하고이

updateFilter(newsName, value){ 
    let newNewsTopics = this.state.topics; 
    if(value){ 
     newNewsTopics.push(newsName); 
    }else{ 
     newNewsTopics.splice(newNewsTopics.indexOf(newsName), 1); 
    } 
    this.props.dispatch(setNewsFilter(newNewsTopics)); 
    this.setState({ 
     newsTopics: newNewsTopics, 
    }); 
} 

filterFeedNews(){ 
    let topics = this.state.topics; 
    let i = 0; 
    return feedNews.filter((item) => { 
     return topics.includes(item.name); 
    }).map((item) => { 
     return (<FeedNews key={++i} name={item.name}/>); 
    }); 
} 

했다 feedNews는 기본적으로 이전 해결책에 대한 위의 예제와 같은 객체 배열로 전환 한 다음 filter 및 map을 사용하여 filterFeedNews 함수로 변환하여 구성 요소 배열로 "변환"합니다. 어떤면에서는 결과가 정확히 "작동하지 않는"원본 애니메이션 인 ListView와 동일하지만 구현이 어떻게 수행 되었기 때문입니다. 애니메이션

나는 그게 내가 실제로 때문에 LayoutAnimation이었다 위의 이야기 모든 문제의 원인이 된 한 문제에 대한

솔루션, 매번 나는 레이아웃 애니메이션 결국 필터링 옵션으로 뉴스 피드를 "삭제" 특정 카테고리의 뉴스 피드보다 더 많이 삭제합니다.

LayoutAnimation이 문제가 아니며 그 부분을 게시하지 않았으므로 사과드립니다.

LayoutAnimation.configureNext({ 
     duration: 300, 
     create: { 
      type: LayoutAnimation.Types.easeInEaseOut, 
      property: LayoutAnimation.Properties.opacity, 
     }, 
     update: { type: LayoutAnimation.Types.easeInEaseOut }, 
    }); 

내가 삭제를 넣지 않은 이유를 묻는 경우, 즉 'LayouAnimation에 있기 때문에하는 것은 아무튼 삭제입니다 :

기본적으로이 삭제 문제가 발생하지 않습니다를 들어, 지금은 솔루션이 만드는 것입니다 t은 내가 잘못 아니에요 경우 모든 정보

Answer 1

을주지 않고 시간을 낭비 죄송합니다, 다시에만

아이폰 OS

에, 안드로이드에 잘 작동 setState를 즉시 반응의 상태를 업데이트하지 않습니다.그래서이를 방지하기 위해 다음과 같이 콜백 함수를 호출하는 것이 좋습니다.

this.setState({ 
    value: !this.state.value, 
},()=> { 
    this.action(this.name, this.state.value); 
}); 

의미가 있습니까?