狀態在還原器減少後未更新

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