Question

我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：我有错误：< br /> [！[在此处输入图片描述] [2]] [2]

App.js（组件）：

import React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux'
import { fetchData } from '../actions';
import TableData from "./TableData";
import TableSearch from "./TableSearch";

export function searchFilter (search, data) {                                               
  return data.filter(n => n.term.toLowerCase().includes(search));
}


export const days = ["23-08-2019", "24-08-2019", "25-08-2019"];        

class Root extends React.Component {

  componentDidMount() {
    this.props.onFetchData(this.props.day);
  }

  render() {
    const { search, shift, data, filteredData, onFilter, onSetSearch, onFetchData } = this.props;

   return (
      <div>
        <TableSearch value={search}
          onChange={(e) => onSetSearch(e.target.value)} 
          onSearch={() => onFilter()} />

        {days && days.map((day, i) => (
          <button key={day} 
            onClick={() => onFetchData(day)}
            className={i === day ? "active" : ""}>{day}</button>
        ))}
        <br />
        {data && Object.keys(data).map(n => (
          <button data-shift={n}
            onClick={(e) => onFilter({ shift: e.target.dataset.shift })}
            className={n === shift ? "active" : ""}>{n} shift</button>
        ))}

        {data && <TableData data={filteredData} /> }

      </div>
    );
  }

}

export const ConnectedRoot = connect(             
  (state) => state,
  (dispatch) => ({
    onFilter: (args) => dispatch({ type: 'RUN_FILTER', ...args }),
    onSetSearch: (search) => dispatch({ type: 'SET_SEARCH', search }),
    onFetchData: (day) => dispatch(fetchData(day))
  })
);



  [1]: https://i.stack.imgur.com/M7Onv.jpg
  [2]: https://i.stack.imgur.com/x0b9i.jpg

Answer 1

看起来就像您错过了将连接应用到Root组件

export const ConnectedRoot = connect(             
  (state) => state,
  (dispatch) => ({
    onFilter: (args) => dispatch({ type: 'RUN_FILTER', ...args }),
    onSetSearch: (search) => dispatch({ type: 'SET_SEARCH', search }),
    onFetchData: (day) => dispatch(fetchData(day))
  })
)(Root);

Answer 2

您需要在ConnectedRoot函数中将（Root）添加到连接末尾

export const ConnectedRoot = connect(             
  (state) => state,
  (dispatch) => ({
    onFilter: (args) => dispatch({ type: 'RUN_FILTER', ...args }),
    onSetSearch: (search) => dispatch({ type: 'SET_SEARCH', search }),
    onFetchData: (day) => dispatch(fetchData(day))
  })
)(Root);

如何解决错误：在我的React-Redux应用程序中，“您必须将组件传递给connect返回的函数。而不是收到{}”？

2 个答案: