Question

当道具更改时，我的平面清单不会重新呈现。在这种情况下，我转到另一个页面并添加一个新的列表项，当我返回到该列表时，它仍然具有旧数据。直到我刷新后，新项目才出现。我已将其他数据设置为正确的道具，但无法正常工作。

import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import { Container, Text, Icon, Left, Right, ListItem, Thumbnail, Body, Content } from 'native-base';
import { removeDog, addDog } from '../actions';

class MyDogs extends Component {

    renderList() {
        if (this.props.myDogs.lendth === 0) {
            return (
                <Text>You have no saved dogs</Text>
            );
        }
        return (
            <FlatList 
            extraData={this.props.myDogs}
            data={this.props.myDogs}
            renderItem={({ item }) => {
                return (
                    <ListItem avatar>
                        <Left>
                            <Thumbnail 
                            source={{ uri: item.photo }} 
                            square
                            />
                        </Left>
                        <Body>
                            <Text>{item.name}</Text>
                            <Text note>{item.breed}</Text>
                        </Body>
                        <Right>
                            <Icon name='arrow-forward' />
                        </Right>
                    </ListItem>
                );
            }}
            keyExtractor={item => item.id}
            />
        );
    }

    render() {
        console.log(this.props.myDogs);
        return (
            <Container>
                <Content>
                    {this.renderList()}      
                </Content>
            </Container>
        );
    }
}

const mapStateToProps = state => {
    return { 
        myDogs: state.dogs.myDogs 
    };
};

export default connect(mapStateToProps, { removeDog, addDog })(MyDogs);

这是我的减速机

import {
    ADD_DOG,
    REMOVE_DOG
} from '../actions/types';

const INITIAL_STATE = {
    myDogs: [],
    rejectedDogs: []
};

export default (state = INITIAL_STATE, action) => {
    let breedString = '';
    switch (action.type) {
        case ADD_DOG:
           // ... making breed string removed
                breedString = action.payload.breeds.breed.$t;
            
            state.myDogs.push({
                name: action.payload.name.$t,
                photo: action.payload.media.photos.photo[1].$t,
                id: action.payload.id.$t,
                breed: breedString.slice(0, -2)
            });
            return { ...state,
                myDogs: state.myDogs
            };
        default:
            return state;
    }
};

在这里我要组合减速器

import { combineReducers } from 'redux';
import FindDogsReducer from './FindDogsReducer';
import BreedReduce from './BreedReducer';
import SettingsReducer from './SettingsReducer';
import DogsReducer from './DogsReducer';


export default combineReducers({
    findDogsReducer: FindDogsReducer,
    dogs: DogsReducer,
    breeds: BreedReduce,
    settings: SettingsReducer
});

Answer 1

FlatList是PureComponent，因此除非更改引用，否则它不会重新呈现。您当前正在使用push将新对象添加到myDogs数组中，这将使当前状态发生变化。

您改为创建一个全新的数组，其中包含当前处于状态的所有狗和您的新狗，它将起作用：

export default (state = INITIAL_STATE, action) => {
  let breedString = "";

  switch (action.type) {
    case ADD_DOG:
      breedString = action.payload.breeds.breed.$t;

      return {
        ...state,
        myDogs: [
          ...state.myDogs,
          {
            name: action.payload.name.$t,
            photo: action.payload.media.photos.photo[1].$t,
            id: action.payload.id.$t,
            breed: breedString.slice(0, -2)
          }
        ]
      };
    default:
      return state;
  }
};

FlatList不会在道具更改时重新呈现

1 个答案: