操作没有"type" - React Native 中的错误

Question

我是React Native的初学者，试图学习带有功能组件的redux，但遇到了这个错误。"错误：操作可能没有未定义的"；类型"；所有物你拼错常数了吗&"；。

创建一个简单的。待办事项列表。

我的Redux.js文件。。。

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {uuid} from 'react-native-uuid';
const initialState = {
todos: [
{
id: 0,
name: 'Test ToDo 1',
completed: false,
},
{
id: 1,
name: 'Test ToDo 2',
completed: true,
},
],
};
export const store = createStore(reducer, applyMiddleware(thunk));
function reducer(state = initialState, action) {
console.log('type ' + JSON.stringify(action));
switch (action.type) {
case 'ADD-TODO':
return {...state, todos: [...state, action.payload]};
case 'TOGGLE-TODO':
return {
...state,
todos: state.todos.map((todo) =>
todo.id === action.payload
? {...todo, completed: !todo.completed}
: todo,
),
};
case 'DELETE-TODO':
return {
...state,
todos: state.todos.filter((todo) => todo.id !== action.payload),
};
default:
return state;
}
}
export const addToDoAction = (todo) => ({
type: 'ADD-TODO',
payload: todo,
});
export const toggleToDoAction = (todoId) => ({
type: 'TOGGLE-TODO',
payload: todoId,
});
export const deleteToDoAction = (todoId) => ({
type: 'DELETE-TODO',
payload: todo,
});

这是ToDO输入组件

import React, {useState} from 'react';
import {View, TextInput, Button, Text} from 'react-native';
import {useDispatch} from 'react-redux';
import {addToDoAction} from '../redux/redux';
import uuid from 'react-native-uuid';
const ToDoInput = () => {
const [text, setText] = useState('Test');
const addToDo = useDispatch((todo) => addToDoAction(todo));
const onChangeText = (text) => {
setText(text);
};
return (
<View>
<Text>Add To Do</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => onChangeText(text)}
editable={true}
value={text}
/>
<Button
title={'Add ToDo'}
onPress={() =>
addToDo({
id: uuid.v4(),
name: text,
completed: false,
})
}
/>
</View>
);
};
export default ToDoInput;

当我点击添加按钮时，我得到了错误。。。

"错误：操作可能没有未定义的"；类型"；所有物你拼错常数了吗&"；。

这是我的app.js文件。目录

import React, {useState} from 'react';
import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import {store} from './redux/redux';
import ToDoInput from './components/ToDoInput';
import ToDoList from './components/ToDoList';
import AddItem from './components/AddItem';
const App = () => {
return (
<Provider store={store}>
<SafeAreaView style={{flex: 1, paddingTop: 100}}>
<View style={{flex: 1, paddingTop: 100}}>
<ToDoInput />
{/* <ToDoList /> */}
</View>
</SafeAreaView>
</Provider>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 60,
},
});
export default App;

找不到解决此问题的方法。请帮忙。

Answer 1

改为执行此操作。

const ToDoInput = () => {
const dispatch = useDispatch(); <-- add this line
const addToDo = useDispatch((todo) => addToDoAction(todo)); <--- remove this line
// update the callback passed into onPress as seen below
return (
<View>
<Button
title={'Add ToDo'}
onPress={() =>
dispatch(addToDoAction({
id: uuid.v4(),
name: text,
completed: false,
})
}
/>
</View>
);
};