Redux Action 无法识别状态答案

【问题标题】：Redux Action does not recognize the stateRedux Action 无法识别状态
【发布时间】：2019-01-19 19:27:03
【问题描述】：

我一直在构建一个 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',
        }
    ]
}

索引缩减器

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

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

export default allReducers;

【问题讨论】：

您希望user 变量是什么？
这是一个虚拟参数，用于让 'giovanni: Operaio' 渲染
奇怪的是operaio被渲染了，但是当我调用动作'user'时它没有定义

标签： javascript reactjs redux

【解决方案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
    }    
}

【讨论】：

你对答案的第一部分完全正确，我的错。但它仍然没有渲染。现在它说 users[0] 没有定义
它仍然没有定义。也许动作创建者有什么需要改变的？
你能告诉我什么是未定义的吗？ this.props.users[0] 要么在这两个地方定义，要么在任何地方都没有。
当您点击“operaio”时，console.log 不会弹出并抛出此错误：Cannot read property '0' of undefined at selectUser
再次更新了我的答案

【解决方案2】：

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

【讨论】：

你的意思是通过this.props.users[0].giovanni || '' 作为参数？
我的意思是首先检查'giovanni'是否存在然后渲染它（它不会在你调用你的处理程序后立即更新，所以如果你不检查它会在渲染中失败）。您可以使用{this.props.users.lenght > 0 ? render giovanni here : use default value 或{this.props.users.length > 0 && render jiovanni component here}。