Question

我的情况是我有两个FlatList组件（A和B）。

A是我的第一个屏幕。我使用react-navigation导航A到B，B将在headerLeft上显示后退箭头。当我点击箭头时它将返回A。但FlatList数据仍然显示B，即使它真的在A ...

我的数据来自react-redux的抓取API，我认为问题来自react-redux。因为我在没有react-redux的情况下测试了一个简单的测试。问题消失了。

我想使用react-redux创建我的项目。我尝试使用shouldComponentUpdate之类的

shouldComponentUpdate = (nextProps, nextState) => {
    if (nextProps.movieList === this.props.movieList) {
      return false;
    }
    return true;
  };

当goBack()到另一个组件

时，它仍然无法修复我的问题

我在console.log中尝试查找我的道具数据发生了什么。当我从A导航到B.我的console.log将显示如下，我发现将呈现一个组件...

然后我点击headerLeft上的后退箭头到A.屏幕是A但数据仍然是B添加我的console.log同时为空。

我无法弄明白。任何帮助，将不胜感激。提前谢谢。

这是我的A组件文件（B与A类似）：

import React, { Component } from 'react';
import { 
  View, FlatList, Dimensions, 
  TouchableOpacity, Image,
  ActivityIndicator, Alert, Platform
} from 'react-native';
import { Icon } from 'react-native-elements';
import { connect } from 'react-redux';
import { fetchMainMovieList } from '../actions';

const { width, height } = Dimensions.get('window');
const equalWidth = (width / 2);

class MainActivity extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'MainActivity',
    headerLeft: 
      <TouchableOpacity style={{ marginLeft: 10 }} onPress={() => navigation.navigate('DrawerOpen')} >
        <Icon name='menu' />
      </TouchableOpacity>
  });

  componentWillMount() {
    this.props.fetchMainMovieList();
  }

  renderItem({ item }) {
    return (
      <View>
        <Image 
          source={{ uri: item.photoHref }} 
          style={{ height: 220, width: equalWidth }} 
          resizeMode="cover" 
        />
      </View>
    );
  }

  render() {
    const movieData = this.props.movieList.movie;
    console.log('A component this.props=>');
    console.log(this.props);
    if (movieData === []) {
      return (
        <View style={styles.loadingStyle}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={movieData}
          renderItem={this.renderItem} 
          numColumns={2}
          horizontal={false}
          keyExtractor={(item, index) => index} 
        />
      </View>
    );
  }
}

const styles = {
  loadingStyle: {
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'center', 
    alignItems: 'center'
  }
};

const mapStateToProps = (state) => {
  const movieList = state.movieList;

  return { movieList };
};

export default connect(mapStateToProps, { fetchMainMovieList })(MainActivity);

这是我的B组件文件：

import React, { Component } from 'react';
import { 
  View, FlatList, Dimensions, 
  Image, ActivityIndicator, Text
} from 'react-native';
import { connect } from 'react-redux';
import { fetchThisWeek } from '../actions';

const { width, height } = Dimensions.get('window');
const equalWidth = (width / 2);

class ThisWeek extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'ThisWeek',
  });

  componentWillMount() {
    this.props.fetchThisWeek();
  }

  renderItem({ item }) {
    return (
      <View>
        <Image 
          source={{ uri: item.photoHref }} 
          style={{ height: 500, width: '100%' }} 
          resizeMode="cover" 
        />
      </View>
    );
  }

  render() {
    const movieData = this.props.movieList.movie;
    console.log('B component this.props=>');
    console.log(this.props);
    if (movieData === []) {
      return (
        <View style={styles.loadingStyle}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={movieData}
          renderItem={this.renderItem} 
          numColumns={1}
          horizontal={false}
          keyExtractor={(item, index) => index} 
        />
      </View>
    );
  }
}

const styles = {
  loadingStyle: {
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'center', 
    alignItems: 'center'
  }
};

const mapStateToProps = (state) => {
  const movieList = state.movieList;

  return { movieList };
};

export default connect(mapStateToProps, { fetchThisWeek })(ThisWeek);

这是我的MyListReducer.js：

import { 
  MOVIELIST_MAINACTIVITY,
  MOVIELIST_THISWEEK,
  MOVIELIST_THEATER
} from '../actions/types';

const INITIAL_STATE = {};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {   
    case MOVIELIST_MAINACTIVITY:
      return action.payload;

    case MOVIELIST_THISWEEK:
      return action.payload;

    case MOVIELIST_THEATER:
      console.log(action.payload);
      return action.payload;

    default:
      return state;
  }
};

Answer 1

在您的reducer中，您已将获取的数据添加到存储中的主对象中，而是必须维护两个不同的变量以分别保存这些不同组件的数据。尝试将reducer更改为，

    import { 
      MOVIELIST_MAINACTIVITY,
      MOVIELIST_THISWEEK,
      MOVIELIST_THEATER
    } from '../actions/types';

    const INITIAL_STATE = {
      weeklyMovies:[],
      allMovies:[]
    };

    export default (state = INITIAL_STATE, action) => {
      switch (action.type) {   
        case MOVIELIST_MAINACTIVITY:
          return {
            ...state,
            allMovies:action.payload
         };

        case MOVIELIST_THISWEEK:
        return {
          ...state,
          weeklyMovies:action.payload
        };          

        case MOVIELIST_THEATER:
          console.log(action.payload);
          return action.payload;

        default:
          return {...state};
      }
    };

在组件A和B中，您应该更改mapStateToProps以从存储中的相应对象读取数据。

对于MainActivity组件

const mapStateToProps = (state) => {
  const movieList = state.allMovies;
  return { movieList };
};

和ThisWeek组件

const mapStateToProps = (state) => {
  const movieList = state.weeklyMovies;
  return { movieList };
};

导航界面时如何避免数据重复？

1 个答案: