在 react 中实现 redux 后，map(item) 函数无法将“item”作为道具传递给 JSX 组件

Question

我正在尝试在我的 react 应用程序中实现 redux。到目前为止，我已经创建了 4 个操作来管理我的应用程序“项目”。前三个； GET_ITEMS、DELETE_ITEM 和 ADD_ITEM 可以完美地工作，并且很容易与我现有的 react 应用程序相结合。第四个“TOGGLE_ITEM”实际上起作用并切换项目，但不知何故破坏了我现有的反应组件。我的 Items.js 文件中出现“项目”未定义错误。这是代码，带星号的行非常重要：

1. 根组件 = Musiclist.js：

class MusicList extends Component {

    componentDidMount() {
        this.props.getItems();
        *console.log(this.props.item.items)*
        // Console log returns the proper items array that gets passed down below to the Items component
    }

    toggle = (id) => {
        *this.props.toggleItem(id)*
        // Pings the item reducer and executes the toggle function, which functions properly
    }

    delItem = (id) => {
        this.props.deleteItem(id)
    }

    addItem = (url) => {
        this.props.addItem(url)
    }

    render() {

        *const { items } = this.props.item*
        // Same as saying this.props.item.items

        return (
            
            <div>

                <AddItem addItem={this.addItem}/>

                *<Items items = {items} toggle = {this.toggle} delItem = {this.delItem} />*
                // Takes in the array items as a prop and the function toggle() as a prop

            </div>

        )
        
    }

}

MusicList.propTypes = {
    getItems: PropTypes.func.isRequired,
    deleteItem: PropTypes.func.isRequired, 
    addItem: PropTypes.func.isRequired,
    toggleItem: PropTypes.func.isRequired,
    item: PropTypes.object.isRequired
    
}

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps, { getItems, deleteItem, addItem, toggleItem})(MusicList);

Reducer = itemReducer.js：

这似乎工作得很好，并且按预期工作。我也看不出这会影响 Items 组件的任何明显原因，因此它可能是一次红色听证会......但我只是在实施后才开始遇到问题。

case TOGGLE_ITEM:
   return {
      items: state.items.map(item => {
         if(item.id === action.payload) {
            item.isOpen = !item.isOpen
         }
      })
   }

问题组件 = Items.js：

引发错误的组件。

import React, { Component } from 'react';
import Item from "./Item";
import PropTypes from "prop-types";

class Items extends Component {

    componentDidMount() {
        // Console logs the same array as the one in MusicList.js
        *console.log(this.props.items)*
        this.props.items.map((item) => (
            // Console logs as it's supposed to, maps the items and prints them, no "item undefined" error
            console.log(item)
        ))
    }
    
    render() {

        return this.props.items.map((item) => (

            <div>

                // "item" is undefined on this line despite the map function defining it above. 
                // I did not change any code here when implementing redux, yet there was no error before redux.
                *<Item key = {item.id} item = {item} toggle = {this.props.toggle} delItem = {this.props.delItem} isOpen = {item.isOpen}/>*

            </div>

            ));
    }
}

// PropTypes
Items.propTypes = {
    items: PropTypes.array.isRequired
}

export default Items;

非常感谢任何帮助！

Answer 1

reducer 中的 map 函数需要一个 return 语句

case TOGGLE_ITEM:
   return {
      ...state,
      items: state.items.map(item => {
         if(item.id === action.payload) {
            item.isOpen = !item.isOpen
         }
         return item;
      })
   }

这将解决问题。并且始终传播状态，然后添加逗号，然后更改键值对

Answer 2

在你的应用中写得好吗？那行代码应该是：

<Item key={item.id} item={item} toggle={this.props.toggle} delItem={this.props.delItem} isOpen={item.isOpen}/>

prop 和实际值之间不能有空格