рендерит один и тот же dataRow слишком много каждый раз - PullRequest
Новая
       5

рендерит один и тот же dataRow слишком много каждый раз

1 голос
/ 28 марта 2019

Элементы повторно визуализируются несколько раз, когда новые элементы добавляются в массив данных проп. Так как же избежать этого бесполезного повторного рендеринга предметов?

Я использую

Реактивный род 0,59,0

Реакция 16.8.3

Это то, что я получаю, когда регистрируюсь, Предметы в методе визуализации

renderItem 0

renderItem 1

renderItem 2

renderItem 3

// отсюда снова renderItem 0

renderItem 1

renderItem 2

renderItem 3

renderItem 4

renderItem 5

renderItem 6

renderItem 7 


//gettingData and displaying component

let offset = this.props.fetchedData.length;

//function to fetch data from server
getData() {
  fetch(url, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        limit: 20,
        offset,
      }),
    })
      .then(response => (response.json())
        .then((responseJson) => {
          if (responseJson.status) {
               this.props.fetchedDataChange(responseJson.data);
            }
        })
        .catch((error) => {
          alert(error);
        }));
}

//renderItem function for flatlist
renderItem({ item }) {
  return (
     <View>
       <Text>
          {item.name}
       </Text>
     </View>
  );
}

render() {
   return (
   <View>
      <FlatList
         data={this.props.fetchedData}
         renderItem={{ item } => this.renderItem({ item })}
         keyExtractor={(item, index) => index.toString()}
         extraData={this.props}
         initialNumToRender={20}
         maxToRenderPerBatch={20}
         onEndReached={() => this.getData()}
         onEndReachedThreshold={0.5}
      />
   </View>
);
}

const mapStateToDispatchProps = dispatch => ({
 fetchedDataChange: value => dispatch(fetchedDataChange(value)
});

const mapStateToProps = state => ({
  fetchedData: state.fetchedDataReducer.fetchedData
});

export default connect(mapStateToProps, mapDispatchToProps)(gettingData);



//fetchedData reducer component

const INITIAL_STATE = {
   fetchedData: [],
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case FETCHED_DATA_CHANGED:
      return {
           ...state,
           fetchedData: [...state.fetchedData, ...action.payload]
      };

    default:
      return state;
  }
};

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

Я полагаю, вы, возможно, ищете React.PureComponent , который реализует поверхностное сравнение для определения необходимости повторного отображения.Вы также можете добиться этого, внедрив shouldComponentUpdate () для React.Component .

. В документации FlatList уже есть пример , демонстрирующий, как вы можете использовать PureComponent для рендеринга.список, просто прокрутите вниз abit и найдите «более сложный пример»:)

Если вы предпочитаете использовать Functional Component вместо Class Component, извлеките React.memo , что похоже на React.PureComponent, но для Functional Components.Надеюсь, это поможет.

0 голосов
/ 28 марта 2019

Если ваш реквизит данных обновляется из переменной состояния, каждый раз при изменении состояния происходит повторный рендеринг.

...