如何实现点击按钮从Redux对象添加下一个FlatList项及删除最后一项

一、解决重复添加同一元素的问题 #

原代码核心问题 #

1. API请求变量名不一致：定义的是url，fetch时误用URL，会导致请求失败。
2. useEffect无依赖数组，触发无限重复请求API。
3. 点击添加时传递整个data数组到action，reducer将整个数组作为一项存入tasks，渲染时始终取数组第一个元素，造成重复假象。
4. 无索引跟踪机制，无法切换到下一个元素添加。

修改后完整代码 #

1. App组件

import * as React from 'react';
import { useState, useEffect } from 'react';
import { Text, View, FlatList, ScrollView, Button } from 'react-native';
import { addItem, deleteLastItem } from '../redux/actions/index';
import { connect } from 'react-redux';

const mapStateToProps = (state) => {
  return { tasks: state.reducer.tasks };
};
const mapDispatchToProps = { addItem, deleteLastItem };

const url = "https://api.punkapi.com/v2/beers";
export function App ({tasks, addItem, deleteLastItem}){
  const [data, setData] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() =>{
    fetch(url)
    .then(x => x.json())
    .then(json => setData(json))
  }, []);

  const handleAddItem = () => {
    if (currentIndex >= data.length) return;
    addItem(data[currentIndex]);
    setCurrentIndex(prev => prev + 1);
  }

  return (
    <ScrollView style={{padding: 20}}>
      <Button title="添加下一个啤酒" onPress={handleAddItem} color="blue" />
      <Button title="删除最后一项" onPress={deleteLastItem} color="red" style={{marginTop: 10}} />
      <FlatList 
        data={tasks} 
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={{marginVertical: 10, padding: 10, borderBottomWidth: 1}}>
            <Text>名称: {item.name} </Text>
            <Text>酒精度: {item.abv}% </Text>
          </View>
        )}
      />
    </ScrollView>
   );
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

2. Action文件

import { ADD_ITEM, DELETE_LAST_ITEM } from "../actionType/index";

export function addItem(task){
  return {
    type: ADD_ITEM,
    payload: task
  }
}

export function deleteLastItem(){
  return {
    type: DELETE_LAST_ITEM
  }
}

3. Reducer文件

import { ADD_ITEM, DELETE_LAST_ITEM } from '../actionType/index';

const initialState = {
  tasks: [],
  count: 0,
};

export default function (state = initialState, action) {
  switch(action.type) {
    case ADD_ITEM:
      return {
        ...state, 
        tasks: [...state.tasks, action.payload]
      };
    case DELETE_LAST_ITEM:
      return {
        ...state,
        tasks: state.tasks.slice(0, -1)
      };
    default:
      return state;
  }
}

4. ActionType文件（需确保存在）

export const ADD_ITEM = 'ADD_ITEM';
export const DELETE_LAST_ITEM = 'DELETE_LAST_ITEM';

二、功能说明 #

1. 添加功能：通过currentIndex跟踪当前待添加元素，每次点击仅传递单个啤酒对象到reducer，同时索引自增，实现依次添加下一个元素。
2. 删除功能：新增DELETE_LAST_ITEM动作及reducer处理逻辑，利用slice(0, -1)移除tasks数组最后一项。
3. 修复API请求变量错误，给useEffect添加空依赖数组避免重复请求。
4. 补充FlatList的keyExtractor，解决列表渲染警告。
5. 优化UI样式，添加分隔线和酒精度信息提升可读性。

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