所以我有一个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;
}
附件是到目前为止我的结果的图像。
另外,我如何添加一个删除按钮来从平面列表中删除最后一个项目?
1条答案
按热度按时间vulvrdjw1#
如果你只是想把啤酒名从data一个一个地添加到tasks数组中,那么我建议使用
tasks
数组的长度作为你想要创建/添加任务的"啤酒"的提取的beerdata
数组的索引。所以选择data[0]
,当tasks
有5个元素时,长度为5
,所以选择data[5]
(* 第六个元素 *)。示例:
应更新任务简化器以保存整个有效负载,而不是
data[]
元素对象上不存在的未定义title
属性。