Javascript Redux操作无法识别该状态

我一直在构建React和Redux应用程序。我创建了一个简单的容器和一个action creator，其中包含一个带有简单控制台的操作。log（）是我在状态（reducer）中写下的用户之一

问题是，当我单击渲染状态时，它会说“用户”未定义。为什么？如何让函数识别状态

容器

import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {selectUser} from '../actions/index';


class UserList extends Component {

renderUser() {  
    return <div onClick={this.props.selectUser(user)}>
             {this.props.users[0].giovanni}
              </div>
           }


    render() {
        return (
            <div>{this.renderUser()}</div>
        );
    }
}


function mapStateToProps(state) {
    return {
        users: state.users
    }

}


function matchDispatchToProps(dispatch) {
    return bindActionCreators({selectUser: selectUser}, dispatch);
}


export default connect(mapStateToProps, matchDispatchToProps)(UserList);

减速器

export default function () {
    return [
        {
        giovanni: 'operaio',
        marco: 'vigile',
        luca: 'esattore',
        }
    ]
}

指数减速机

import {combineReducers} from 'redux';
import reducerMain from './reducer_main';

const allReducers = combineReducers({
    users: reducerMain
});

export default allReducers;

---

这看起来不正确，原因有很多

renderUser() {  
  return (
     <div onClick={this.props.selectUser(user)}>
       {this.props.users[0].giovanni}
     </div>
  );
}

而不是单独调用

this.props.selectUser

什么是

用户

？它没有定义。我想你是说

  renderUser() {  
    return (
       <div onClick={() => this.props.selectUser(this.props.users[0])}>
         {this.props.users[0].giovanni}
       </div>
    );
  }

---

这看起来不正确，原因有很多

renderUser() {  
  return (
     <div onClick={this.props.selectUser(user)}>
       {this.props.users[0].giovanni}
     </div>
  );
}

而不是单独调用

this.props.selectUser

什么是

用户

？它没有定义。我想你是说

  renderUser() {  
    return (
       <div onClick={() => this.props.selectUser(this.props.users[0])}>
         {this.props.users[0].giovanni}
       </div>
    );
  }

---

---

事件处理程序将触发状态的异步更新，因此在组件的同一呈现上很可能没有该值，如果未设置，则可以使用默认值，例如：

this.props.users[0].giovanni | |'''}

如果没有值或条件呈现。

事件处理程序将触发状态的异步更新，因此在组件的相同呈现上很可能没有值，如果没有设置，可以使用默认值，例如：

this.props.users[0].giovanni | |'''}

以防没有值或条件呈现。

您希望

user

变量是什么？它是一个虚拟参数，用于让“giovanni:operaio”呈现奇怪的是operaio被呈现，但是当我调用动作“user”时，它没有定义你期望

user

变量是什么？它是一个虚拟参数，用于让“giovanni:operaio”呈现奇怪的是operaio被呈现，但当我调用动作“user”时，它没有定义答案的第一部分你完全正确，我的错。但它仍然无法呈现。现在它说用户[0]没有定义，但编辑仍然没有定义。也许动作创建者有什么需要改变的吗？你能告诉我什么没有定义吗？

this.props.users[0]

在这两个地方都有定义，或者没有定义。当您单击“operaio”时，console.log不会弹出并抛出此错误：无法读取未定义的属性“0”，在SelectUsers再次更新了我的答案您完全正确回答答案的第一部分，我的错误。但它仍然无法呈现。现在它说用户[0]没有定义，但编辑仍然没有定义。也许动作创建者有什么需要改变的吗？你能告诉我什么没有定义吗？

this.props.users[0]

在这两个位置都有定义，或者没有定义。当您单击“operaio”时，console.log不会弹出并抛出此错误：无法读取SelectUsers的undefined属性“0”再次更新了我的答案是否要传递此.props.users[0].giovanni | |“”作为参数？我的意思是首先检查“giovanni”是否存在，然后渲染它（在调用处理程序后它不会立即更新，因此如果不选中它，它将在渲染中失败）。您可以执行

{this.props.users.lenght>0？在此处渲染giovanni：使用默认值

或

{this.props.users.length>0&&render jiovanni component here}

。您的意思是将此.props.users[0]。giovanni | |作为参数传递吗？我的意思是先检查“giovanni”是否存在，然后渲染它（它不会在调用处理程序后立即更新，因此如果不进行检查，它将在渲染中失败）。您可以执行

{this.props.users.lenght>0？在此处渲染giovanni：使用默认值

或

{this.props.users.length>0并在此处渲染jiovanni组件}

。

export const selectUser = (user) => {
    console.log('yo how are you?', user);
    return {
        type: 'USER_SELECTED',
        payload: user
    }    
}