itsource

플랫리스트를 다시 렌더링하는 방법

mycopycode 2023. 2. 26. 09:43
반응형

플랫리스트를 다시 렌더링하는 방법

ListView와 달리 이 . state . datasource는 갱신할 수 있습니다.Flat List를 업데이트하거나 다시 렌더링하는 방법이나 예가 있습니까?

제 목표는 사용자가 버튼을 눌렀을 때 텍스트 값을 업데이트하는 것입니다...

renderEntries({ item, index }) {
    return(
        <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})>
             <Text>{this.state.data[index].value}</Text>
        </TouchableHighlight>
    )
}

<FlatList 
    ref={(ref) => { this.list = ref; }} 
    keyExtractor={(item) => item.entry.entryId} 
    data={this.state.data} 
    renderItem={this.renderEntries.bind(this)} 
    horizontal={false} />

하다를 사용하세요.extraData속성을 지정합니다.

설명서에 기재되어 있는 바와 같이:

extraData={this.state}로로 합니다.FlatList은 합니다.FlatListstate.selected이 하지 않으면 이 소품을 할 수 없습니다.FlatList가 없다는 을 알 수 .PureComponent프로포트의 비교는 변경되지 않습니다.

빠르고 심플한 솔루션을 원하시면 됩니다.

  1. 추가 데이터를 부울 값으로 설정합니다.

    extraData={this.state.refresh}

  2. 목록을 다시 렌더링/새로 고치려는 경우 부울 상태 값 전환

    this.setState({ 
    refresh: !this.state.refresh
})

쉽네요. ,, 건, 냥, 용, 용, 용으로 쓰면 돼요.extraData

Flat List 또는 Virtualized List가 정상에서 객체가 변경되었는지 확인하는 추가 데이터가 백그라운드에서 작동하는 방식을 볼 수 있습니다.onComponentWillReceiveProps★★★★★★ 。

여러분이 할 꼭 수 있는 것입니다.extraData.

제가 하는 일은 다음과 같습니다.

저는 불변의.js를 사용하고 있기 때문에 보고 싶은 것이 모두 포함된 지도(불변의 객체)를 전달하기만 하면 됩니다.

<FlatList
    data={this.state.calendarMonths}
    extraData={Map({
        foo: this.props.foo,
        bar: this.props.bar
    })}
    renderItem={({ item })=>((
        <CustomComponentRow
            item={item}
            foo={this.props.foo}
            bar={this.props.bar}
        />
    ))}
/>

하면, ★★★★★★★★★★★★★★★★★★★★★★.this.props.foo ★★★★★★★★★★★★★★★★★」this.props.bar 변변, 리 changeCustomComponentRow불변의 객체가 이전과 다른 객체가 되기 때문에 갱신됩니다.

알겠습니다. FlatList가 데이터 프로펠러 이외의 데이터 변경을 인식하도록 하려면 이를 extraData로 설정해야 합니다.그래서 지금 이렇게 하겠습니다.

<FlatList data={...} extraData={this.state} .../>

참조처: https://facebook.github.io/react-native/docs/flatlist#extradata

많은 검색과 진정한 답을 찾던 끝에 마침내 나는 그것이 가장 좋다고 생각하는 답을 얻었다.

       <FlatList
      data={this.state.data}
      renderItem={this.renderItem}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      ItemSeparatorComponent={this.renderSeparator}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={1}
      extraData={this.state.data}
      removeClippedSubviews={true}
      **keyExtractor={ (item, index) => index }**
              />
    .....

주요 문제는 (KeyExtractor) 이렇게 사용하지 않았다는 것입니다.keyExtractor={(항목) => item.아이디(ID) 이렇게 바꾸면 마법처럼 작동했어요. 이게 누군가에게 도움이 됐으면 좋겠어요.

버튼을 사용할 경우 onPress 내부의 setState로 데이터를 업데이트할 수 있습니다.그런 다음 SetState가 플랫리스트를 다시 렌더링합니다.

이전 답변의 연장선입니다.두 가지 사항을 확인해야 합니다. extraData를 추가하고 keyExtractor가 고유해야 합니다.keyExtractor가 일정할 경우 렌더는 트리거되지 않습니다. 

<FlatList
data={this.state.AllArray}
extraData={this.state.refresh}
renderItem={({ item,index })=>this.renderPhoto(item,index)}
keyExtractor={item => item.id}
>
                                    </FlatList>

const [itemSelected, setItemSelected] = setState(null);
....
const FlatListItem = (item) => {
    return (
        <TouchableOpacity onPress={() => setItemSelected(item.id)}>
            <View style={ (itemSelected === item.id) ? style.itemWrapperActive : style.itemWrapper }>
                <Text>{ item.label }</Text>
            </View>
        </TouchableOpacity>
    )
}
....
<FlatList
    ItemSeparatorComponent={() => <View style={{ width: 20 }} />}
    data={ flatListData }
    renderItem={ ({item}) => FlatListItem(item) }
    keyExtractor={ (item) => item.id }
    extraData={ itemSelected }
/>

는 이 를 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★extraData={this.state} 내용은 아래 해 주세요.

render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.arr}
          extraData={this.state}
          renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        />
      </View>
    );
  }

예에서는 .machine

const [selected, setSelected] = useState(machine)

useEffect(() => {
    setSelected(machine)
}, [machine])

교체했습니다.FlatListSectionList상태 변경에 대한 올바른 업데이트입니다.

<SectionList
  keyExtractor={(item) => item.entry.entryId} 
  sections={section}
  renderItem={this.renderEntries.bind(this)}
  renderSectionHeader={() => null}
/>

해야 할 은 ''입니다.section구조를 :diff 구조:

const section = [{
  id: 0,
  data: this.state.data,
}]

저에게는 extraData와 아이템 컴포넌트를 한 번 더 드릴다운하는 것이 비결이었습니다.

state = {
  uniqueValue: 0
}

<FlatList
  keyExtractor={(item, index) => item + index}
  data={this.props.photos}
  renderItem={this.renderItem}
  ItemSeparatorComponent={this.renderSeparator}
/>

renderItem = (item) => {
  if(item.item.selected) {
    return ( <Button onPress={this.itemPressed.bind(this, item)}>Selected</Button> );
  }
  return ( <Button onPress={this.itemPressed.bind(this, item)}>Not selected</Button>);
}

itemPressed (item) {
  this.props.photos.map((img, i) => {
    if(i === item.index) {
      if(img['selected') {
        delete img.selected;
      } else {
        img['selected'] = true;
      }
      this.setState({ uniqueValue: this.state.uniqueValue +1 });
    }
  }
}

을 '다'에 넣어주세요.extraData

창의적일 수 있어요.

예를 들어, 체크 박스가 있는 리스트의 변경을 취급하고 있는 경우.

<FlatList
      data={this.state.data.items}
      extraData={this.state.data.items.length * (this.state.data.done.length + 1) }
      renderItem={({item}) => <View>

FlatList가 프로포트와 스테이트의 양쪽 모두의 데이터 변화를 인식하도록 하려면 프로포트와 스테이트를 모두 참조하는 오브젝트를 작성하고 플랫 리스트를 갱신할 수 있습니다.

const hasPropOrStateChange = { propKeyToWatch: this.props, ...this.state};
<FlatList data={...} extraData={this.hasPropOrStateChange} .../>

문서: https://facebook.github.io/react-native/docs/flatlist#extradata

react-native-flatlist에서는 extraData라고 하는 속성입니다.아래 행을 플랫리스트에 추가합니다.

 <FlatList
          data={data }
          style={FlatListstyles}
          extraData={this.state}
          renderItem={this._renderItem}
       />

저는 기능 컴포넌트를 사용하고 있습니다.즉, Flatlist와 redux data를 사용하고 있습니다.저는 Redux 스토어와 함께 모든 주를 관리하고 있습니다.API 호출 후 Flatlist 데이터를 업데이트하기 위한 솔루션입니다.

처음에는 이렇게 하고 있었어요.-

const DATA  = useSelector((state) => state.address.address);


<FlatList
    style = {styles.myAddressList}
    data = {DATA}
    renderItem = {renderItem}
    keyExtractor = {item => item._id}
    ListEmptyComponent = {EmptyList}
    ItemSeparatorComponent={SeparatorWhite}
    extraData = {refresh}
    
    />

하지만 데이터는 플랫리스트 데이터를 다시 렌더링하지 않았습니다.

솔루션으로서 다음과 같은 것이 마음에 들었습니다.-

<FlatList
    style = {styles.myAddressList}
    data = {useSelector((state) => state.address.address)}
    renderItem = {renderItem}
    keyExtractor = {item => item._id}
    ListEmptyComponent = {EmptyList}
    ItemSeparatorComponent={SeparatorWhite}
    />

Redux 상태를 변수에 할당하지 않고 플랫리스트 데이터 소스에 직접 전달합니다.

감사해요.

를 사용하는 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.extraData소품 및 추가 로딩 작업도 수행했습니다.usePrevious

import {useEffect, useRef} from 'react';

export const usePrevious = <T>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

제 아이템에 이렇게 사용했어요.

const prevData = usePrevious({data});

//CODES...

useEffect(() => {
    if (prevData?.data === undefined) {
      return;
    }
    if (prevData?.data?.someID !== data?.someId) {
      // do something.
      showSubChildren(false)
    }
  }, [data?.AuctionName, prevData, resetItemStates]);

이 일어났냐면요,의 항목이 가 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 네.undefined() 데이터 속성이 변경되었을 .그런 다음 일부 데이터 속성이 변경되었는지 여부를 확인하고 변경되었으면 작업을 수행해야 합니다.

아래와 같이 하면 플랫리스트 아이템 변경이 즉시 반영됩니다.redux를 사용하지 않는 경우에도 컴포넌트에서 이와 유사하게 수행할 수 있습니다.

  let list = Object.assign([], state.auctionList);
  let objIndex;
  //Find index of specific object using findIndex method.
  objIndex = list.findIndex(
    obj => obj.auction_vehicles.vehicle_id == payload.vehicle_id,
  );

  // //Update object's property.
  list[objIndex].auction_vehicles.time_left = payload.offer_expiry_time;
  list[objIndex].auction_vehicles.starting_price = payload.amount;
  list[objIndex].auction_vehicles.bidding_status =
    payload.highest_bidder_flag;

  return { ...state, auctionList: list };

나는 위의 모든 해결책을 시도했다.하나도 안 먹혀.결국 나는 두 가지 선택을 했다.

  1. 섹션 목록 시도
  2. 하려면 , 「」를 호출해 주세요.setState(undefined)에 다시 를 해서 해 주세요.setState(value)이렇게 하면 전체 목록이 다시 렌더링됩니다.

두 번째 걸 해봤는데 효과가 있었어요.

사용방법:

onRefresh={true}

면 insideflatList요소.

Flatlist의 extraData가 작동하지 않아 우연히 redux의 소품을 사용하고 있었습니다.이는 ED209의 답변에 있는 코멘트의 문제와 비슷하게 들렸다.소품을 받았을 때 수동으로 setState를 호출하게 되었습니다.

componentWillReceiveProps(nextProps: StateProps) {
    if (this.props.yourProp != null && nextProps.yourProp) {
        this.setState({ yourState: processProp(nextProps.yourProp) });
    }
}


<FlatList
  data={this.state.yourState}
  extraData={this.state.yourState}
/>

React 17을 사용하는 사용자는 get Derived State From Props를 사용합니다.

언급URL : https://stackoverflow.com/questions/43397803/how-to-re-render-flatlist

반응형

'itsource' 카테고리의 다른 글

angularjs에서의 조건부 ng-model 바인딩  (0) 2023.02.26
angular js의 web api에서 csv 파일 다운로드  (0) 2023.02.26
Angular가 DOM에 스코프 업데이트를 추가한 후 메서드를 트리거하는 방법은 무엇입니까?  (0) 2023.02.26
Oracle Date Time in Where 절?  (0) 2023.02.26
Django에서 템플릿을 사용하지 않고 JSON을 반환하려면 어떻게 해야 하나요?  (0) 2023.02.18

'itsource'의 다른글

  • 현재글플랫리스트를 다시 렌더링하는 방법

관련글

댓글

티스토리툴바