React Native配置KeyExtractor唯一key后删除操作仍清空所有元素问题

问题根因 #

你出现所有列表元素全部清空的问题，核心原因是blogReducer中delete_blogpost分支的filter回调函数没有返回值：

Array.prototype.filter 会保留回调函数返回值为真值的元素，你采用了带大括号的函数体写法但未写return语句，导致回调每次返回undefined，被判定为假值，所有元素都会被过滤掉，最终返回空数组。

修复方案 #

修改Context文件中delete_blogpost的处理逻辑，两种写法二选一即可：

1. 主动添加return语句：

case "delete_blogpost":
  return state.filter((blogPosts) => {
    return blogPosts.id !== action.payload;
  });

2. 去掉大括号使用箭头函数隐式返回：

case "delete_blogpost":
  return state.filter((blogPosts) => blogPosts.id !== action.payload);

额外优化建议 #

• 你当前FlatList的keyExtractor用了title作为唯一key，建议替换为id，避免后续出现标题重复导致的渲染异常：

keyExtractor={(blogPosts) => blogPosts.id.toString()}

• 补充缺失的依赖导入：你当前IndexScreen的代码里没有引入useContext和React基础包，运行会报错，需要在文件头部补充导入：

import React, { useContext } from 'react';

内容的提问来源于stack exchange，提问作者vvspower