Question

项目代码如下：

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"));

导致错误：

元素类型无效：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object。

工作和非工作情况下的项目是/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"));

更新

多亏了同样的事情，我将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，将尝试记录编写可完全自治的组件（消费者委托对其执行的操作）仍然将所有操作传递给消费者，以便消费者可以选择对某些操作执行操作而不是需要combineReducers因为据我所知，combineReducers不会处理action.type，getState对thunk动作的命名冲突，也不会将组件动作包装到消费者处理或委派的动作中（消费者可以轻松确定当操作被消费者包装时调度操作的组件。

Answer 1

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

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

哪个不起作用。 React组件是class或function。它需要像：

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

Reactjs使用react-redux connect

1 个答案: