Reactjs 使用 react-redux connect 创建的项目列表答案

【问题标题】：Reactjs list of items created with react-redux connectReactjs 使用 react-redux connect 创建的项目列表
【发布时间】：2018-08-18 19:05:08
【问题描述】：

商品代码如下：

import React, { Component } from "react";
import { connect } from "react-redux";
const init = (bindProps,bindAction) => {
  //@connect does not work with pre processor and/or transpiler
  class Item extends Component {
    render() {
      return (
        <div>
          <div>status: {this.props.item.status}</div>
          <button onClick={() => this.props.approveItem(this.props.index)}>Approve </button>
          <button onClick={() => this.props.disApproveItem(this.props.index)}>DisApprove </button>
        </div>
      );
    }
  };
  return connect(bindProps, bindAction)(Item);
};
export default init;

在我的应用中，我试试这个：

const Items = 
  <ul>{
    store.getState().items.map(
      itemState=>{
        const Item = initItem(
          state => state.items[itemState.index],
          wrapDispatch(
            "ITEM"
          )(
            itemActions
          )(
            (a,b,c,d,e)=>console.log("ok",a,b,c,d,e)||store.getState().items[0]
          )
        );
        console.log("item is now:",Item);
        return <Item key={itemState.index}/>
      }
    )
  }</ul>

//...
class App extends Component {
  render() {
    return (
      <div style={styles}>
        <Provider store={store}>
          <Items />
        </Provider>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

导致错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

工作和不工作情况下的项目是/node_modules/react-redux/es/components/connectAdvanced.js中的连接功能

以下确实有效：

const Item = initItem(
  state => state.items[0],
  wrapDispatch(
    "ITEM"
  )(itemActions)(
    (a,b,c,d,e)=>console.log("ok",a,b,c,d,e)&&store.getState().items[0]
  )
);
const Item2 = initItem(
  state => state.items[1],
  wrapDispatch(
    "ITEM"
  )(itemActions)(
    (a,b,c,d,e)=>console.log("ok",a,b,c,d,e)&&store.getState().items[1]
  )
);

class App extends Component {
  render() {
    return (
      <div style={styles}>
        <Provider store={store}>
          <ul><Item /><Item2 /></ul>
        </Provider>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

更新

感谢 sameeh，我将 Items 更改为函数：

const Items = () =>
  <ul>{
    store.getState().items.map(
      itemState=>{
        const Item = initItem(
          state => state.items[itemState.index],
          wrapDispatch(
            "ITEM"
          )(
            itemActions
          )(
            ()=>itemState
          )
        );
        return <Item key={itemState.index}/>
      }
    )
  }</ul>

完整（未完成）代码here，将尝试记录编写一个可以完全自主的组件（消费者将操作委托给它）仍然将所有操作传递给消费者，因此消费者可以选择对某些操作采取行动并且不需要@ 987654322@ 因为据我了解，combineReducers 不处理 action.type 可能的命名冲突，getState 用于 thunk 操作或将组件操作包装到消费者处理或委托的操作中（消费者可以轻松识别哪个组件调度了该操作因为动作是由消费者包装的）。

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

错误说明了一切。你有类似的东西：

const Items = <ul>...</ul>

这行不通。 React 组件是class 或function。应该是这样的：

const Items = () => <ul>...</ul>

【讨论】：