大家好,我是一个使用React Native和Redux的新手,虽然我觉得我几乎要把我的头缠在Redux的核心概念上,但我试图把它应用到这个应用程序中,但却一直迷路。我还没有有效地合并平面列表,因为我的MapDispatchToProps在视觉上做了我想要的事情,即当按下添加到列表按钮时,显示下面用户的输入。
问题
1)我不明白为什么我在文本输入中添加内容时会出现NaN?
我已经尝试了两天,现在看视频和阅读文档
2nd)关于如何更改我的代码,以便当用户输入一个值时,它通过平面列表显示在下面,有什么建议吗?
真的试图理解我不理解的东西,所以任何一点都很好。
我的任务列表组件
import {
Text,
View,
Button,
StyleSheet,
TextInput,
SafeAreaView,
FlatList,
} from 'react-native';
import {
newToDo,
addToList,
removeFromList,
reset,
} from '../redux/actions/index';
const TaskList = ({ todo, history, addToList, removeFromList, reset }) => {
return (
<View>
<SafeAreaView>
<TextInput
style={styles.input}
value={todo}
placeholder="Enter Value Here"
/>
<View style={styles.button}>
<Button
title="Add Values to List"
onPress={() => addToList({ todo })}
/>
</View>
<View style={styles.button}>
<Button
title="RemoveFromList"
onPress={() => removeFromList({ todo })}
/>
</View>
<View style={styles.button}>
<Button title="Reset" onPress={() => reset()} />
</View>
{history.map((x) => (
<Text
style={{
borderWidth: 1,
borderColor: 'gray',
borderRadius: 5,
margin: 10,
padding: 5,
}}>
{x}
</Text>
))}
<FlatList
data={newToDo}
renderItem={newToDo}
keyExtractor={(item) => item.toDo}
/>
</SafeAreaView>
</View>
);
};
const styles = StyleSheet.create({
input: {
padding: 5,
textAlign: 'center',
borderWidth: StyleSheet.hairlineWidth * 2,
borderColor: 'gray',
borderStyle: 'solid',
borderRadius: StyleSheet.hairlineWidth * 10,
marginTop: StyleSheet.hairlineWidth * 20,
marginBottom: StyleSheet.hairlineWidth * 20,
},
button: {
margin: 5,
},
});
const MapDispatchToProps = { addToList, removeFromList, reset };
const MapStateToProps = (store) => ({
list: store.listReducer.newToDo,
history: store.listReducer.history,
});
export default connect(MapStateToProps, MapDispatchToProps)(TaskList);
redux文件夹操作
import {ADD_TO_LIST, REMOVE_FROM_LIST, RESET_LIST} from '../actionTypes/index';
export const addToList = (newToDo) => {
return {
type: ADD_TO_LIST,
payload: {
toDo: 'newToDo',
},
};
};
export const removeFromList = (newToDo) => {
return {
type: REMOVE_FROM_LIST,
payload: {
toDo: 'newToDo',
},
};
};
export const reset = () => {
return {
type: RESET_LIST,
payload: {
},
};
};
我的列表Reducer
ADD_TO_LIST,
REMOVE_FROM_LIST,
RESET_LIST,
} from '../actionTypes/index';
const initialState = {
history: [],
list:[],
};
export default function (state = initialState, action) {
if (action.type == ADD_TO_LIST) {
return {
...state,
list: state.list - action.payload.toDo,
history: [...state.history, + action.payload.toDo],
};
} else if (action.type == REMOVE_FROM_LIST) {
return {
...state,
list: state.list - action.payload.toDo,
history: [...state.history, - action.payload.toDo],
};
} else if (action.type == RESET_LIST) {
return { ...state, list: 0, history: [] };
}
return state;
}
我的主应用程序
import TaskList from './TaskList/index';
import store from './redux/store';
export default function App() {
return (
<Provider store={store}>
<TaskList />
</Provider>
)
}
Full project available on expo snacks https://snack.expo.dev/@stephaniebrandon/excited-juice-box
1条答案
按热度按时间t0ybt7op1#
首先,你为什么要在你的reducer中减去action的有效载荷呢?如果你用一个数组减去string,当然它会返回NaN。
第二,你在你的动作中打错了字。在动作负载中没有这样的负载newToDo,只有toDo。在你的reducer中更新你的代码如下。