傳遞給動作後，React/Redux參數變得不確定

我有一個簡單的搜索欄，它有一個用於搜索/過濾數據的onChange方法。傳遞給動作後，React/Redux參數變得不確定

class ItemSearch extends React.Component { 

constructor(){ 
    super(); 
    this.handleOnChange = this.handleOnChange.bind(this); 
} 

handleOnChange(e){ 
    const searchTerm = this.search.value; 
    console.log(searchTerm); 
    this.props.fetchSearch(searchTerm); 
} 

render() { 
    return (
    <div> 
     <form> 
     <input type='text' ref={(input) => {this.search = input}} onChange={this.handleOnChange}></input> 
     </form> 
     <div> 
     {this.props.data.map((item, i) => { 
      return <ListItem 
      key={i} 
      item={item} 
      /> 
     })} 
     </div> 
    </div> 
) 
} 
}

註銷搜索詞可以給我正確的值。但是，在傳遞給redux動作創建器後，它變得不確定。我的行動非常簡單，就像這樣。

export default function fetchSearch(value){ 
    console.log(value); 
    return { 
    type: 'FETCH_SEARCH', 
    payload: value 
    } 
}

在這個日誌中它變得沒有定義。我認爲它已經超出了範圍，但是如果不向動作創作者傳遞參數，無論如何都沒有辦法從表單中提取狀態。我在許多教程和帖子中看到了這個確切的事情，所以我有點失落，儘管它可能是我錯過的一些愚蠢的東西。

謝謝。

來源

2017-05-02 Simon Leigh

嘗試'this.props.fetchSearch（this.search.value）;'你也使用bindActionCreator或調度，你可以分享該代碼 –

我忘了更新容器中的分派。我知道這很愚蠢。現在所有排序和工作，非常感謝！ –

我應該添加這個答案 –

是的，你在這裏犯了一個錯誤。首先你必須使用redux形式來完成這件事。在那裏你必須連接這個減速器或像下面的商店。

import React, { Component } from 'react'; 
import { reduxForm } from 'redux-form'; 
import { createTimer } from '../actions/index'; 

class TimerNew extends Component { 

onSubmit(props){ 
    this.props.createTimer(props); 
} 

    render() { 
    const { fields: { hours, minutes, seconds, label }, handleSubmit } = this.props; 
    return (
    <form onSubmit={handleSubmit(this.props.createTimer)}> 
     <h5>Create A New Timer</h5> 
     <div className={`form-group ${hours.touched && hours.invalid ? 'has-danger' : ''}`}> 
     <label>Hours</label> 
     <input type="text" className="form-control" {...hours} /> 
     <div className="text-help"> 
      {hours.touched ? hours.error : ''} 
     </div> 
     </div> 
     <div className={`form-group ${minutes.touched && minutes.invalid ? 'has-danger' : ''}`}> 
     <label>Minutes</label> 
     <input type="text" className="form-control" {...minutes} /> 
     <div className="text-help"> 
      {minutes.touched ? minutes.error : ''} 
     </div> 
     </div> 
     <div className={`form-group ${seconds.touched && seconds.invalid ? 'has-danger' : ''}`}> 
     <label>Seconds</label> 
     <input type="text" className="form-control" {...seconds} /> 
     <div className="text-help"> 
      {seconds.touched ? seconds.error : ''} 
     </div> 
     </div> 
     <div className={`form-group ${label.touched && label.invalid ? 'has-danger' : ''}`}> 
     <label>Label</label> 
     <input type="text" className="form-control" {...label} /> 
     <div className="text-help"> 
      {label.touched ? label.error : ''} 
     </div> 
     </div> 
     <button type="submit" className="btn btn-primary">Submit</button> 
    </form> 
); 
    } 
} 

function validate(values) { 
    const errors = {}; 

    if (!values.hours) { 
    errors.title = 'Enter hours'; 
    } 
    if (!values.minutes) { 
    errors.categories = 'Enter minutes'; 
    } 
    if (!values.seconds) { 
    errors.content = 'Enter seconds'; 
    } 
    if (!values.label) { 
    errors.content = 'Enter label'; 
    } 
    return errors; 
} 

// connect: first argument is mapStateToProps, 2nd is mapDispatchToProps 
// reduxForm: 1st is form config, 2nd is mapStateToProps, 3rd is mapDispatchToProps 
export default reduxForm({ 
    form: 'TimerNewForm', 
    fields: ['hours', 'minutes', 'seconds', 'label'], 
    validate 
}, null, { createTimer })(TimerNew);

這裏有與調用reduxForm助手來包裝你的形式，並通過在我的情況下采取行動的創建者是createTimer。另請注意，代碼可能因您使用的redux-forms版本而異。這裏我使用4.3。*。有關更多詳細信息，請查閱redux-forms文檔here。希望這可以幫助。快樂的編碼。

來源

2017-05-02 06:49:02

我只是忘了更新容器中的mapDipatchToProps。一旦我做到了，它工作正常。謝謝大家！

來源

2017-05-02 07:02:30

傳遞給動作後，React/Redux參數變得不確定

回答

相關問題