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

x759pob2 于 2023-03-02 发布在其他

关注(0)|答案(1)|浏览(121)

所以我有一个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;
}

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

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

redux

来源：https://stackoverflow.com/questions/75539123/how-to-make-button-add-next-flatlist-item-from-redux-object

1条答案

按热度按时间

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;
}

赞(0）回复(0）举报 2023-03-02

我来回答

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

1条答案

相关问题

热门标签

最新问答