Question

我一直在构建一个React和Redux应用程序。我创建了一个简单的容器和一个动作创建者，该动作创建者使用一个简单的console.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 const selectUser = (user) => {
    console.log('yo how are you?', user.users[0]);
    return {
        type: 'USER_SELECTED',
        payload: user
    }    
}

减速器

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

Index Reducer

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。

什么是user？未定义。我想你是说

  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
    }    
}

Answer 2

您的事件处理程序将触发状态的异步更新，因此您很有可能在相同的组件呈现中没有该值，如果未设置，则可以使用默认值，例如：this.props.users[0].giovanni || ''}如果没有价值或有条件的渲染。

Redux Action无法识别状态

2 个答案: