如何在子組件中正確使用mapDispatchToProps函數？

我在Youtube上使用React Native + Redux製作簡單的Todo應用程序。如何在子組件中正確使用mapDispatchToProps函數？

添加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

來源

2017-03-01 Juntae

如果您編寫像這樣的代碼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

來源

2017-03-01 11:16:20

我真的不知道如果我理解你的代碼... 順便說一句，如果你是從什麼地方進口任何作用，我認爲你不必使用調度方法，因爲deleteTodo不是屬性方法。再次嘗試不帶調度（），此外，嘗試直接調用deleteTodo（）方法。

編輯：在onPress事件寫這篇文章 - > onPress = {（）=> deleteTodo（this.props.id）} 應該調用的方法onces該事件被觸發

讓我知道，如果它作品！

來源

2017-03-01 11:08:28

但** Redux **似乎引人注目地使用這種方式...我認爲它要間接使用調度功能... – Juntae

您添加的代碼位於同一個文件中？如果是，你應該有單獨的文件中兩個班只爲清晰的代碼... 此外，我定義了一些原型，像這樣： TodoItem.Proptype = { onDeleteTodo = React.Proptype.func， } 有了這個，我會確保函數存在，然後在mapDispatchToProps中定義它... –

我找到了解決方案......但我不知道它爲什麼起作用。

改變道具回調函數

onPress={this.props.onDeleteTodo(this.props.id)}

==>

onPress={() => { this.props.onDeleteTodo(this.props.id) } }

：是onPress道具只能收到回調函數？我不知道。

移動語句連接到下面的const mapStateToProps and mapDispatchToProps

：是const ...變量只能引用其聲明下面？我也不知道。

來源

2017-03-01 11:08:58 Juntae

如何在子組件中正確使用mapDispatchToProps函數？

回答

相關問題