React状态不使用条件语句更新

时间:2017-02-01 22:07:13

标签: reactjs redux

我对React有一个非常奇怪的问题。

以下作品。它调用操作创建者fetchUserForm,然后获取对象并将其设置为名为userForm的redux存储。如果userForm已加载,则会在step1Component中调用class FormEdit extends Component { constructor(props) { super(props) this.nextPage = this.nextPage.bind(this) this.previousPage = this.previousPage.bind(this) this.updateComponents = this.updateComponents.bind(this) this.state = { page: 1, } } componentWillMount() { this.props.fetchUserForm(this.props.params.id); } render() { const { page } = this.state return ( <div> {page === 1 && <Step1Page nextPage={this.nextPage}/>} </div> ) } } function mapDispatchToProps(dispatch){ return bindActionCreators({fetchUserForm}, dispatch); } function mapStateToProps(state) { return { userForm: state.newForm.userForm, }; } export default connect(null, mapDispatchToProps)(FormEdit);

const INITIAL_STATE = {
    userForm:'false'
};

case FETCH_USER_FORM:
   console.log("----------------> REDUCER: updating custom form");
   console.log(action.payload);
   return {...state, userForm: action.payload };

减速机:

render() {

if(!this.props.userForm){
  return(
    <div> LOADING </div>
  )
}

 return(
  <div> Actual Content </div>
 )

Step1Page组件:

userForm

以上工作完美。但是,这是我的奇怪问题发生的地方。我想对FormEdit组件中的FormEdit做一些事情。我无法使用该表单直到完全加载,因此我将其添加到if(!this.props.userForm){ return( <div> LOADING </div> ) } return( <div> "Actual Content </div> )

FormEdit

除非我将此添加到false,否则我会永远停留在LOADING div。当我查看react工具时,它表示userForm设置为FormEdit。这没有任何意义,因为当我查看console.log时它说: enter image description here

这意味着它被传递给reducer。然而,即使它已经通过,查看反应工具,它表示userForm仍然是&#34; false&#34;。

如果删除ruby-build: use openssl from homebrew Downloading ruby-2.3.1.tar.bz2... -> https://cache.ruby-lang.org/pub/ruby/2.3/ruby-2.3.1.tar.bz2 Installing ruby-2.3.1... Installed ruby-2.3.1 to /Users/meee/.rbenv/versions/2.3.1 meee$ sudo gem install berkshelf Password: ERROR: Error installing berkshelf: buff-extensions requires Ruby version >= 2.2.0. 中的条件,则一切都会再次起作用,并且userForm将填充对象。所以我真的很困惑为什么我的FormEdit组件中的条件导致了这样的问题。如果没有添加,一切正常。但是当它被添加时,reducer状态仍然是错误的。

1 个答案:

答案 0 :(得分:2)

var items = { "library_items": [ { "id": "23453", "artifactID": "", "title":"Physics Basics", "subject": "Physics" }, { "id": "23453", "artifactID": "", "title":"Chemistry Basics", "subject": "Biology" } ] }; var subjects = ['Physics', 'Physics', 'Mathematics']; _.find(items["library_items"], function(o) {  return subjects.indexOf(o.subject) > -1;  }); 中,您没有FormEdit财产。

您必须将userform传递到mapStateToProps函数。

connect