Блог

Я добавляю уникальный ключ в плоский список, и теоретически должна быть удалена только кнопка, которую я нажимаю, но вместо этого удаляются все элементы

 import { render } from "react-dom"; import {  View,  Text,  StyleSheet,  FlatList,  Button,  TouchableOpacity, } from "react-native"; import { Context } from "../context/BlogContext"; import { Entypo } from "@expo/vector-icons";  const IndexScreen = function () {  const { state, addBlogPost, deleteBlogPost } = useContext(Context);  return (  lt;Viewgt;  lt;Button title="Add Post" onPress={() =gt; addBlogPost()} /gt;  lt;FlatList  data={state}  keyExtractor={(blogPosts) =gt; blogPosts.title}  renderItem={({ item }) =gt; {  return (  lt;View style={styles.row}gt;  lt;Text style={styles.title}gt;  {item.title} - {item.id}  lt;/Textgt;  lt;TouchableOpacity  onPress={() =gt; {  deleteBlogPost(item.id);  }}  gt;  lt;Entypo style={styles.icon} name="trash" /gt;  lt;/TouchableOpacitygt;  lt;/Viewgt;  );  }}  /gt;  lt;/Viewgt;  ); };  const styles = StyleSheet.create({  row: {  flexDirection: "row",  justifyContent: "space-between",  paddingHorizontal: 10,  paddingVertical: 20,  borderTopWidth: 1,  borderColor: "gray",  },   title: {  fontSize: 18,  },   icon: {  fontSize: 24,  }, });  export default IndexScreen;  

Контекстный экран:

 import createDataContext from "./createDataContext";  const blogReducer = function (state, action) {  switch (action.type) {  case "delete_blogpost":  return state.filter((blogPosts) =gt; {  blogPosts.id !== action.payload;  });  case "add_blogpost":  return [  ...state,  {  id: Math.floor(Math.random() * 99999),  title: `Blog Post #${state.length   1}`,  },  ];  default:  return state;  } };  const addBlogPost = function (dispatch) {  return () =gt; {  dispatch({ type: "add_blogpost" });  }; };  const deleteBlogPost = (dispatch) =gt; {  return (id) =gt; {  dispatch({ type: "delete_blogpost", payload: id });  }; };  export const { Context, Provider } = createDataContext(  blogReducer,  { addBlogPost, deleteBlogPost },  [] );  

и

  export default function (reducer, actions, initialState) {  const Context = React.createContext();   const Provider = ({ children }) =gt; {  const [state, dispatch] = useReducer(reducer, initialState);   // actions === { addBlogPost : (dispatch) =gt; {return () =gt; {}}}   const boundActions = {};  for (let key in actions) {  boundActions[key] = actions[key](dispatch);  }   return (  lt;Context.Provider value={{ state, ...boundActions }}gt;  {children}  lt;/Context.Providergt;  );  };  return { Context, Provider }; }   

я не знаю, как это решить. все названия уникальны, так как они имеют разные номера, но все равно все удаляются!!!!!!!!!!!!

вот фотография приложения