反应状态没有用条件语句更新

下面的工程。它调用动作创建者fetchUserForm，然后获取一个对象并将其设置为名为userForm的REDX存储。如果它被加载，然后在step1Component中调用userForm。

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 };

Step1Page组件：

render() { 

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

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

上述作品完美。然而，这是我奇怪的问题发生的地方。我想用FormEdit组件中的userForm做些什么。我不能使用的形式，直到它完全加载，所以我加入这FormEdit：

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

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

除非我加这FormEdit，我卡在LOADING DIV永远。当我查看该反应的工具，它说，用户窗体被设置为false。这是没有意义的，因为当我查看的console.log它说：

这意味着它传递给减速。然而，即使它通过了，看看反应工具，它说userForm仍然是“错误的”。

如果我删除的条件在FormEdit，一切再次工作和窗体填充的对象。所以我很困惑为什么我的FormEdit组件中的条件导致了这样的问题。没有添加时，一切正常。但是当它被添加时，还原状态仍然是错误的。

来源

2017-02-01 lost9123193

在FormEdit你没有userform财产。

你要通过mapStateToProps到connect功能。

export default connect(mapStateToProps, mapDispatchToProps)(FormEdit);

来源

2017-02-01 22:16:59

啊。当然是。没有看到那个小错字。谢谢！ – lost9123193

反应状态没有用条件语句更新

回答

相关问题