reducer还原后状态未更新

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错误name is not defined for users因为当我检查this.props用户为空数组时

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-think或类似的案例结合使用，则可以在组件中尝试以下操作：

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