Question

当我运行应用程序时，我收到错误：＆＃34;无法读取属性＆＃39; forEach＆＃39;未定义＆＃34;在我的items财产上。调试后，我发现属性项仅在组件内部未定义。我已经在mapStateToProps函数和我的reducer中定义了items。

这是组件：

import React from 'react';
import ListItemCont from '../containers/list-item.js';

class ListComp extends React.Component {
    constructor (props){
        super(props);
    }

    render() {
        let itemsComponents = [];
        this.props.items.forEach((item) => {
            itemsComponents.push(
                <ListItemCont description={item.description}
                              header={item.header}>
                </ListItemCont>)
        });

        return(
            <ul>
                {itemsComponents}
                <button onClick={this.props.onAddClick()}></button>
                <button onClick={this.props.onRemoveClick()}></button>
            </ul>
        )
    }
}

export default ListComp;

这是我的容器：

import {addItem, removeItem} from '../actions/list.js';
import {connect} from 'react-redux';
import ListComp from '../components/list.jsx';

const mapStateToProps = (stateProps, ownProps) => {
    return {
        items: stateProps.items
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        onAddClick: () => {
            dispatch(addItem());
        },
        onRemoveClick: (item) => {
            dispatch(removeItem(item));
        }
    }
};

const ListCont = connect(mapStateToProps, mapDispatchToProps)(ListComp);
export default ListCont;

这是我的减速机：

import {LIST_ACTIONS} from '../utilities/consts.js';
import {addItem, removeItem} from '../actions/list.js';

const initialState = {
    items: []
};

export const listReducer = (state = initialState, action) => {
    switch(action.type){
        case LIST_ACTIONS.ADD_ITEM: {
            return Object.assign({}, state, {items: [...items, action.item]});
        }
        case LIST_ACTIONS.REMOVE_ITEM: {

            let itemIndex = state.item.indexOf(action.item);
            return Object.assign({}, state, {items: [
                    ...state.items.slice(0, itemIndex),
                    ...state.items.slice(itemIndex + 1)
                ]});
        }
        default: {
            return state;
        }
    }
};

我在这里缺少什么？我不知道为什么项目未定义。

Answer 1

<强>的变化：

1-它应该是stateProps.listReducer.items，您还需要指定缩减器名称。

2- onClick期待一个函数，你在这里做的是，你直接调用那些函数而不是将它们作为事件处理程序传递，所以这样写：

<button onClick={this.props.onAddClick}></button>         //here remove ()
<button onClick={this.props.onRemoveClick}></button>      //here remove ()

当你写：

onClick={this.props.onAddClick()}

只要组件呈现（不点击按钮），就会自动调用

onAddClick函数。

无限循环的原因：

   render   ---->   onAddClick()   ----->   reducer state update--
     ^                                                           |
     |                                                           |
     |                                                           |
      -----------------------------------------------------------

检查DOC： Handling Events in JSX.

Answer 2

据我所知，问题在于：

        <ul>
            {itemsComponents}
            <button onClick={this.props.onAddClick()}></button>
            <button onClick={this.props.onRemoveClick()}></button>
        </ul>

这应该是：

       <ul>
            {itemsComponents}
            <button onClick={this.props.onAddClick.bind(this)}></button>
            <button onClick={this.props.onRemoveClick.bind(this)}></button>
        </ul>

在您的情况下，函数会在呈现后立即执行。因此，在渲染中更新状态并导致无限循环。

另一种语法是：

<button onClick={() => this.props.onAddClick() } ></button>

属性在组件内部未定义 - React Redux

2 个答案: