道具变更时，我的平面清单不会重新呈现。在这种情况下，我转到另一个页面并添加一个新的列表项，当我返回到该列表时，它仍然具有旧数据。直到我刷新后，新项目才出现。我已将其他数据设置为正确的道具，但无法正常工作。
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
});FlatList是a，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;
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句