React Native(Redux)调度操作(在父组件中)来自不同文件中的const

Question

找到答案，访问整个状态而不是TODO，请在下面回答。

我在一个组件中有一个绑定函数，我将它传递给常量。复选框正确单击一次，但随后停止工作。我做错了什么？

toggleTodoOnPress被正确调用一次，但随后停止响应。该值正确地从false变为true，但当再次单击复选框时，该值会停留在true。即使todo.complete为true，复选框值也显示为false。单击一次后，该函数将不再被调用。

母公司：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
View,
Text,
TouchableOpacity,
ScrollView,
TextInput,
StyleSheet,
Dimensions,
} from 'react-native';
import {addTodo, toggleTodo} from './action/Todo';
import Todo from './component/Todo';
import {addTextInputPlaceholderText, addTodoButtonText} from './Constants';
let ScreenHeight = Dimensions.get('window').height;
let addTodoBarHeight = 0.08 * ScreenHeight;
class TodoApp extends Component {
constructor(props) {
super(props);
this.toggleTodoOnPress = this.toggleTodoOnPress.bind(this);
}
state = {
todo: '',
todos: [],
};
addTodoInputOnChangeText = (value) => {
this.setState({
todo: value,
});
};
addTodoOnPress = () => {
if (this.state.todo.trim() === '') {
return;
}
this.props.addTodo(this.state.todo);
this.setState({
todo: '',
});
};
toggleTodoOnPress = (id) => {
this.props.toggleTodo(id);
};
render() {
console.log(this.props.todos)
var todosList = this.props.todos;
var todos = [];
for (let i = 0; i < todosList.length; i++) {
todos.push(
<Todo
key={'todo-' + todosList[i].id}
todo={todosList[i]}
toggleTodoOnPress={(id) => this.toggleTodoOnPress(todosList[i].id)}
/>,
);
}
return (
<View>
<View style={styles.inputContainer}>
<TextInput
placeholder={addTextInputPlaceholderText}
placeholderTextColor="white"
style={styles.addTextInput}
value={this.state.todo}
onChangeText={this.addTodoInputOnChangeText}
/>
<TouchableOpacity
style={styles.addButton}
onPress={this.addTodoOnPress}
title={addTodoButtonText}>
<Text style={styles.addButtonText}>{addTodoButtonText}</Text>
</TouchableOpacity>
</View>
<ScrollView>{todos}</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
inputContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: addTodoBarHeight,
width: '100%',
},
addTextInput: {
paddingLeft: 16,
fontSize: 16,
height: '100%',
width: '70%',
backgroundColor: 'black',
color: 'white',
},
addButton: {
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '30%',
backgroundColor: 'green',
},
addButtonText: {
fontSize: 18,
color: 'white',
},
});
const mapStateToProps = (state) => {
return {
todos: state.Todos.todos.length === 0 ? [] : state.Todos.todos,
};
};
const mapDispatchToProps = (dispatch) => {
return {
addTodo: (task) => {
dispatch(addTodo(task));
},
toggleTodo: (id) => {
dispatch(toggleTodo(id));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

儿童体质：

import React from 'react';
import {connect} from 'react-redux';
import {View, Text, StyleSheet} from 'react-native';
import CheckBox from '@react-native-community/checkbox';
const Todo = ({todo, toggleTodoOnPress}) => (
console.log(todo.complete),
<View style={styles.todoContainer}>
<Text style={styles.todoText}>{todo.content}</Text>
<View style={styles.todoCheckboxContainer}>
<CheckBox
value={todo.complete}
onChange={toggleTodoOnPress}
onValueChange={toggleTodoOnPress}
tintColors={{true: 'green', false: 'black'}}
tintColor='black'
onCheckColor='white'
onFillColor='green'
onTintColor='green'
/>
</View>
</View>
);
const styles = StyleSheet.create({
todoContainer: {
backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
},
todoText: {
fontWeight: 'bold',
fontSize: 18,
padding: 12,
paddingTop: 16,
paddingBottom: 16,
width: '90%',
},
todoCheckboxContainer: {
alignItems: 'center',
justifyContent: 'center',
width: '10%',
},
});
export default Todo;

toggleTodo减速器：

const Todos = (state = initialState, action) => {
switch (action.type) {
case TODO_ADD:
return {
...state,
todos: state.todos.concat({
id: action.id,
content: action.content,
complete: action.complete,
}),
};
case TODO_TOGGLE:
return {
...state,
todos: state.todos.map((todo) =>
todo.id === action.id
? {
...todo,
complete: !state.complete,
}
: todo,
),
};
default:
return state;
}
};

希望问题有道理，乐意解释。

Answer 1

toggleTodo减速器中出现错误，已更改。。。状态为。。。todo正在访问整个状态，而不是单个todo。

toggleTodo减速器已更新(正确(：

const Todos = (state = initialState, action) => {
switch (action.type) {
case TODO_ADD:
return {
...state,
todos: state.todos.concat({
id: action.id,
content: action.content,
complete: action.complete,
}),
};
case TODO_TOGGLE:
return {
...state,
todos: state.todos.map((todo) =>
todo.id === action.id
? {
...todo,
complete: !todo.complete,
}
: todo,
),
};
default:
return state;
}
};