如何使按钮从Redux对象添加下一个FlatList项

x759pob2  于 2023-03-02  发布在  其他
关注(0)|答案(1)|浏览(120)

所以我有一个API,它目前设置在我的Reduce中的任务状态下。但是,我想知道当我点击按钮时,如何移动到Reduce中的下一个索引。目前,如果我点击按钮,它会不断添加当前数组索引名称,但不会添加下一个,因为我设置了索引。希望我的代码会澄清。这是我的Redux应用程序代码:

import * as React from 'react';
import {useState, useEffect} from 'react';
import { Text, View, StyleSheet, FlatList, ScrollView, Image, Button } from 'react- 
native';
import Constants from 'expo-constants';
import { Add_Item} from '../redux/actions/index';
import { connect } from 'react-redux';

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


const url = "https://api.punkapi.com/v2/beers";
export function App ({tasks,Add_Item}){
  const [data, setData] = useState([]);
  React.useEffect (() =>{
    fetch(URL)
    .then (x => x.json())
    .then(json => setData(json))
  })
  return (
    <ScrollView>
      <Button title="Add Text to List" onPress={() => Add_Item(data)} color="blue"/>
      <FlatList data={tasks} renderItem={({ item }) => (
            <View>
              <Text>Name: {item.title[0].name} </Text>
            </View>
          )}
        />
    </ScrollView>
   );
}

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

这是我的行动代码:

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

export function Add_Item(task_title){
  return {
    type:ADD_ITEM,
    payload:{
      title:task_title,
    }
  }
}

这是我的减速器代码:

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

var initialState = {
tasks: [],
count: 0,
};
export default function (state = initialState, action) {
  if (action.type == ADD_ITEM) {
    return {...state, 
    tasks: [...state.tasks,{title:action.payload.title}]}
  }
  return state;
}

附件是到目前为止我的结果的图像。

另外,我如何添加一个删除按钮来从平面列表中删除最后一个项目?

vulvrdjw

vulvrdjw1#

如果你只是想把啤酒名从data一个一个地添加到tasks数组中,那么我建议使用tasks数组的长度作为你想要创建/添加任务的"啤酒"的提取的beer data数组的索引。所以选择data[0],当tasks有5个元素时,长度为5,所以选择data[5](* 第六个元素 *)。
示例:

import React from "react";
import { connect } from "react-redux";
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  ScrollView,
  Image,
  Button
} from "react-native";
import { actions } from "./tasks.slice";
import "./styles.css";

const url = "https://api.punkapi.com/v2/beers";

function App({ addItem, tasks }) {
  const [data, setData] = React.useState([]);

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

  return (
    <div className="App">
      <ScrollView>
        <Button
          title="Add Text to List"
          onPress={() => addItem(data[tasks.length])}
          color="blue"
        />
        <FlatList
          data={tasks}
          renderItem={({ item }) => (
            <View>
              <Text>Name: {item.title.name}</Text>
            </View>
          )}
        />
      </ScrollView>
    </div>
  );
}

const mapStateToProps = (state) => ({
  tasks: state.tasks.tasks
});

const mapDispatchToProps = {
  addItem: actions.addItem
};

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

应更新任务简化器以保存整个有效负载,而不是data[]元素对象上不存在的未定义title属性。

export default function (state = initialState, action) {
  if (action.type === ADD_ITEM && action.payload) {
    return {
      ...state, 
      tasks: [...state.tasks, { title: action.payload }]
    };
  }
  return state;
}

相关问题