状态在还原器减少后未更新

Question

我正尝试在页面加载时更新我的​​DOM。基本上它应该显示渲染用户的数据。但是当我通过记录器检查时没有发生，我发现这些值不存储在我的this.props值中。但行动被触发了，减速器已经完成了它的任务。所以我担心为什么我的mapStatToProps不是更新？ 这里是我的容器文件

import User from "../components/User" 
import React from "react" 
import {connect} from "react-redux" 
import {fetchUsers} from "../action/UserAction" 
import PropTypes from 'prop-types' 


const UserContainer =React.createClass ({ 
    componentWillMount(){ 
    console.log("componenet will mount") 
    this.props.dispatch(fetchUsers()); 

}, 

render(){ 
console.log(this.props); 
    return(
    <User 
    name={this.props.users[0].name} 
    role={this.props.users[0].role}> 
    </User> 
    ) 
} 
}) 

UserContainer.propTypes = { 
users:PropTypes.arrayOf(PropTypes.shape({ 
    name:PropTypes.string.isRequired, 
    role:PropTypes.string.isRequired 
})).isRequired 
} 

const mapStateToProps= state => { 
    console.log("state",state) 
    return{ 
    users:state.users 
    } 
} 
export default connect(
    mapStateToProps 
)(UserContainer) 

我减速器文件

export default function reducer(state={users :[]},action){ 
    // console.log("inside reducer") 
    switch(action.type){ 
     case "FETCH_USERS":{ 

      const newState={...state,users:action.payload} 
      console.log("newSrate",newState) 
      return newState 
     } 
     default: { 
    return { 
    ...state 
    } 
     } 
} 
} 

和我的操作文件

export function fetchUsers(){ 
    console.log("fetch users") 
    return { 
     type:"FETCH_USERS", 
     payload:"[{'name':'x','roles':'developer'},{'name':'y','role':'god'}]" 

    } 
} 

我收到错误，如name is not defined for users，因为当我检查this.props用户是空的array

Answer 1

的问题是，你的初始状态是：

state={ 
    users : [] 
} 

并在第一次渲染时试图访问this.props.users[0].name而this.props.users[0]是undefined，它会触发并发生错误。
更新你的组件如下：

import User from "../components/User" 
import React from "react" 
import {connect} from "react-redux" 
import {fetchUsers} from "../action/UserAction" 
import PropTypes from 'prop-types' 


const UserContainer =React.createClass ({ 
    componentWillMount(){ 
    console.log("componenet will mount") 
    this.props.dispatch(fetchUsers()); 

}, 

render(){ 
    if (!this.props.users.length) return null; // return null if there are no users in the array 

    return(
    <User 
    name={this.props.users[0].name} 
    role={this.props.users[0].role}> 
    </User> 
    ) 
} 
}) 

UserContainer.propTypes = { 
users:PropTypes.arrayOf(PropTypes.shape({ 
    name:PropTypes.string.isRequired, 
    role:PropTypes.string.isRequired 
})).isRequired 
} 

const mapStateToProps= state => { 
    console.log("state",state) 
    return{ 
    users:state.users 
    } 
} 
export default connect(
    mapStateToProps 
)(UserContainer) 

Answer 2

您应该确保哟在您尝试将其显示在屏幕上之前，您的数据已正确加载。 如果你的情况是不涉及异步请求，并结合其Redux的思考或类似的，你可以简单地试试这个在您的组件：

if(!users) { 
    return (...loading ...); 
} 
return (Your content here);