Mixing
React Native FlatList won't re-render when the last element in an array deleted
I'm trying to delete items in a FlatList and all items get deleted fine but only the last item remains in the list not re-rendered.
I use FlatList inside react-native-collapsible/Accordion and try to delete items via Redux action. It seems like all the elements in the array get deleted when I console.log state data after slpice, but the last item in the array still displays on the list even I re-render the the Accordion list by clicking the the section of it.
FlatList
<FlatList
data={section.data}
extraData={section.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<Chore
toDetail={() =>
this.props.navigation.navigate('Details', {
itemId: index,
categoryId: item.categoryId
})}
item={item.desc}
categoryId={item.categoryId}
assignedName= {item.assignedName}
keyExtractor={this._keyExtractor}
index={index}
parentFlatList={this} >
</Chore>
)}
/>
Delete function (src/components/Chore.js)
_handleDelete = () => {
const { dispatch } = this.props;
const deletingCategoryId = this.props.categoryId;
const deletingIndex = this.props.index;
const action = {
type: 'DELETE_CHORE',
deletingCategoryId: deletingCategoryId,
deletingIndex: deletingIndex
}
dispatch(action);
this.setState({activeRowKey: 1})
}
this.setState({activeRowKey: 1}) is my attempt to make it re-render the item but not working.
Reducer (src/store/reducers/chores.js)
case DELETE_CHORE:
const {deletingCategoryId, deletingIndex} = action;
newState = state;
newState.choreList[deletingCategoryId].data.splice(deletingIndex, 1);
return newState;
Data Structure (src/store/reducers/chores.js)
choreList: [
{
title: "Sunday",
data: [
{
desc: "Laundry",
assignedName: "A",
priority: "High",
note: "Use dry sheet",
categoryId: 0
},
{
desc: "Doing the dishes",
assignedName: "B",
priority: "Medium",
note: "Use pods",
categoryId: 0
}
]
},
It should re-render all the elements on the list when you click each section of the Accordion list.
GitHub repo of my project
react-native react-native-flatlist
asked Jan 3 at 1:01
Meguru Mel YasudaMeguru Mel Yasuda
62
add a comment |
I'm trying to delete items in a FlatList and all items get deleted fine but only the last item remains in the list not re-rendered.
I use FlatList inside react-native-collapsible/Accordion and try to delete items via Redux action. It seems like all the elements in the array get deleted when I console.log state data after slpice, but the last item in the array still displays on the list even I re-render the the Accordion list by clicking the the section of it.
FlatList
<FlatList
data={section.data}
extraData={section.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<Chore
toDetail={() =>
this.props.navigation.navigate('Details', {
itemId: index,
categoryId: item.categoryId
})}
item={item.desc}
categoryId={item.categoryId}
assignedName= {item.assignedName}
keyExtractor={this._keyExtractor}
index={index}
parentFlatList={this} >
</Chore>
)}
/>
Delete function (src/components/Chore.js)
_handleDelete = () => {
const { dispatch } = this.props;
const deletingCategoryId = this.props.categoryId;
const deletingIndex = this.props.index;
const action = {
type: 'DELETE_CHORE',
deletingCategoryId: deletingCategoryId,
deletingIndex: deletingIndex
}
dispatch(action);
this.setState({activeRowKey: 1})
}
this.setState({activeRowKey: 1}) is my attempt to make it re-render the item but not working.
Reducer (src/store/reducers/chores.js)
case DELETE_CHORE:
const {deletingCategoryId, deletingIndex} = action;
newState = state;
newState.choreList[deletingCategoryId].data.splice(deletingIndex, 1);
return newState;
Data Structure (src/store/reducers/chores.js)
choreList: [
{
title: "Sunday",
data: [
{
desc: "Laundry",
assignedName: "A",
priority: "High",
note: "Use dry sheet",
categoryId: 0
},
{
desc: "Doing the dishes",
assignedName: "B",
priority: "Medium",
note: "Use pods",
categoryId: 0
}
]
},
It should re-render all the elements on the list when you click each section of the Accordion list.
GitHub repo of my project
react-native react-native-flatlist
asked Jan 3 at 1:01
Meguru Mel YasudaMeguru Mel Yasuda
62
add a comment |
I'm trying to delete items in a FlatList and all items get deleted fine but only the last item remains in the list not re-rendered.
I use FlatList inside react-native-collapsible/Accordion and try to delete items via Redux action. It seems like all the elements in the array get deleted when I console.log state data after slpice, but the last item in the array still displays on the list even I re-render the the Accordion list by clicking the the section of it.
FlatList
<FlatList
data={section.data}
extraData={section.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<Chore
toDetail={() =>
this.props.navigation.navigate('Details', {
itemId: index,
categoryId: item.categoryId
})}
item={item.desc}
categoryId={item.categoryId}
assignedName= {item.assignedName}
keyExtractor={this._keyExtractor}
index={index}
parentFlatList={this} >
</Chore>
)}
/>
Delete function (src/components/Chore.js)
_handleDelete = () => {
const { dispatch } = this.props;
const deletingCategoryId = this.props.categoryId;
const deletingIndex = this.props.index;
const action = {
type: 'DELETE_CHORE',
deletingCategoryId: deletingCategoryId,
deletingIndex: deletingIndex
}
dispatch(action);
this.setState({activeRowKey: 1})
}
this.setState({activeRowKey: 1}) is my attempt to make it re-render the item but not working.
Reducer (src/store/reducers/chores.js)
case DELETE_CHORE:
const {deletingCategoryId, deletingIndex} = action;
newState = state;
newState.choreList[deletingCategoryId].data.splice(deletingIndex, 1);
return newState;
Data Structure (src/store/reducers/chores.js)
choreList: [
{
title: "Sunday",
data: [
{
desc: "Laundry",
assignedName: "A",
priority: "High",
note: "Use dry sheet",
categoryId: 0
},
{
desc: "Doing the dishes",
assignedName: "B",
priority: "Medium",
note: "Use pods",
categoryId: 0
}
]
},
It should re-render all the elements on the list when you click each section of the Accordion list.
GitHub repo of my project
react-native react-native-flatlist
asked Jan 3 at 1:01
Meguru Mel YasudaMeguru Mel Yasuda
62
I'm trying to delete items in a FlatList and all items get deleted fine but only the last item remains in the list not re-rendered.
I use FlatList inside react-native-collapsible/Accordion and try to delete items via Redux action. It seems like all the elements in the array get deleted when I console.log state data after slpice, but the last item in the array still displays on the list even I re-render the the Accordion list by clicking the the section of it.
FlatList
<FlatList
data={section.data}
extraData={section.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<Chore
toDetail={() =>
this.props.navigation.navigate('Details', {
itemId: index,
categoryId: item.categoryId
})}
item={item.desc}
categoryId={item.categoryId}
assignedName= {item.assignedName}
keyExtractor={this._keyExtractor}
index={index}
parentFlatList={this} >
</Chore>
)}
/>
Delete function (src/components/Chore.js)
_handleDelete = () => {
const { dispatch } = this.props;
const deletingCategoryId = this.props.categoryId;
const deletingIndex = this.props.index;
const action = {
type: 'DELETE_CHORE',
deletingCategoryId: deletingCategoryId,
deletingIndex: deletingIndex
}
dispatch(action);
this.setState({activeRowKey: 1})
}
this.setState({activeRowKey: 1}) is my attempt to make it re-render the item but not working.
Reducer (src/store/reducers/chores.js)
case DELETE_CHORE:
const {deletingCategoryId, deletingIndex} = action;
newState = state;
newState.choreList[deletingCategoryId].data.splice(deletingIndex, 1);
return newState;
Data Structure (src/store/reducers/chores.js)
choreList: [
{
title: "Sunday",
data: [
{
desc: "Laundry",
assignedName: "A",
priority: "High",
note: "Use dry sheet",
categoryId: 0
},
{
desc: "Doing the dishes",
assignedName: "B",
priority: "Medium",
note: "Use pods",
categoryId: 0
}
]
},
It should re-render all the elements on the list when you click each section of the Accordion list.
GitHub repo of my project
react-native react-native-flatlist
react-native react-native-flatlist
asked Jan 3 at 1:01
Meguru Mel YasudaMeguru Mel Yasuda
62
asked Jan 3 at 1:01
Meguru Mel YasudaMeguru Mel Yasuda
62
asked Jan 3 at 1:01
Meguru Mel YasudaMeguru Mel Yasuda
62
asked Jan 3 at 1:01
Meguru Mel YasudaMeguru Mel Yasuda
62
asked Jan 3 at 1:01
Meguru Mel YasudaMeguru Mel Yasuda
62
62
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015100%2freact-native-flatlist-wont-re-render-when-the-last-element-in-an-array-deleted%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015100%2freact-native-flatlist-wont-re-render-when-the-last-element-in-an-array-deleted%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
