javascript - Redux Action 无法识别状态

Question

我一直在构建一个 React 和 Redux 应用程序。我创建了一个简单的容器和一个 Action 创建器，它通过一个简单的 console.log() 来承载一个 Action ，这是我在状态(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 const selectUser = (user) => {
    console.log('yo how are you?', user.users[0]);
    return {
        type: 'USER_SELECTED',
        payload: user
    }    
}

reducer

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;

Answer 1

由于多种原因，这看起来不正确

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

onClick 接收一个函数。您的意思很可能是以下内容

    <div onClick={() => this.props.selectUser(user)}>

而不是对 this.props.selectUser 本身的调用。

什么是用户？它没有被定义。我猜你的意思是

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

操作必须如下所示，因为用户对象已经传递

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