reactjs - 如何在子组件中正确使用mapDispatchToProps函数？

Question

我正在使用 React Native + Redux 跟随 Youtube 制作简单的 Todo 应用程序。

添加 Todo 效果很好。所以我采取了下一步，尝试删除待办事项遇到问题。视频有点旧，所以版本和平台(我的是Android)不同。所以它的方式有点不同......(ES5/ES6 等)

无论如何...我想使用 mapDispatchToProps 的函数 onDeleteTodo 向调度程序发送操作，但它不起作用。

首先，我尝试连接要存储的组件，因此添加了行 TodoItem = connect(mapStateToProps, mapDispatchToProps)(TodoItem);。但错误仍然存​​在。

出了问题...但我找不到，我该如何修复它？

提前致谢...下面是我的代码。

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    ScrollView,
    TouchableOpacity
} from 'react-native';

import {connect} from 'react-redux';
import {addTodo, deleteTodo} from '../actions';

class TodoItem extends Component {
    render() {
        return (

// ***************************************
// Below line (onPress prop) is problem. 
// when I trying to save todo, 
// Error "undefined is not a function (evaluating 'this.props.onDeleteTodo(this.props.id)')

            <TouchableOpacity onPress={this.props.onDeleteTodo(this.props.id)}>
                <View style={styles.todoContainer}>
                    <Text style={styles.todoText}>
                        {this.props.text}
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }
}

TodoItem = connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoItem);


class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            newTodoText: ""
        }
    }


    render() {
        var renderTodos = () => {
            return this.props.todos.map((todo) => {
                return (
                    <TodoItem text={todo.text} key={todo.id} id={todo.id}/>
                )
            })
        };

        return (
            <View style={styles.wrapper}>
                <View style={styles.topBar}>
                    <Text style={styles.title}>
                        To-Do List
                    </Text>
                </View>
                <View style={styles.inputWrapper}>
                    <TextInput
                        onChange={(event) => {
                            this.setState({
                                 newTodoText: event.nativeEvent.text
                            });
                        }}
                        value={this.state.newTodoText}
                        returnKeyType="done"
                        placeholder="New Todo"
                        onSubmitEditing={
                        () => {
                            if(this.state.newTodoText && this.state.newTodoText != ''){
                                  this.props.onAddTodo(this.state.newTodoText);
                                this.setState({
                                     newTodoText: ''
                                });
                            }

                        }
                        }
                        underlineColorAndroid='transparent'
                        style={styles.input}/>
                </View>
                <ScrollView
                    automaticallyAdjustContentInsets={false}>
                    {renderTodos()}
                </ScrollView>

            </View>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        todos: state.todos
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        onAddTodo: (todo) => {
            dispatch(addTodo(todo))
        },
        onDeleteTodo: (id) => {
            dispatch(deleteTodo(id))
        }
    }
};

Main = connect(
    mapStateToProps,
    mapDispatchToProps
)(Main);

export default Main

Answer 1

如果您编写像这样的代码 onPress={ this.props.onDeleteTodo(this.props.id) } 那么您将传递给 onPress 属性由函数 this.props.onDeleteTodo 返回。换句话说，this.props.onDeleteTodo 在组件渲染时执行。

如果你想传递这个函数(而不是它的返回值)，那么你需要编写onPress={ this.props.onDeleteTodo.bind(this, this.props.id) }。这样，您就可以将 this 作为上下文并以 this.props.id 作为第一个参数来传递此函数。有关此方法的更多信息，请参见:Use of the JavaScript 'bind' method