React组件不调用connect redux函数

如何解决React组件不调用connect redux函数

我在组件和redux存储的连接上有一个奇怪的问题。虽然我有2个组件（同级），一个可以连接到redux商店（Pets.js），另一个不能（FeedList.js）

我会尽力解释。

从上到下的结构是我的项目。

App.js：

import React,{ Component,Fragment } from "react";
import { HashRouter as Router,Route,Switch } from "react-router-dom";

import { Provider as AlertProvider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";

// Components
import Header from "./layout/Header";
import Dashboard from "./pets/Dashboard";
import Alerts from "./layout/Alerts";
import Login from "./accounts/Login";
import Register from "./accounts/Register";
import PrivateRoute from "./common/PrivateRoute";
import MainFeed from "./feed/MainFeed";

import { Provider } from "react-redux";
import store from "../store";
import { loadUser } from "../actions/auth";

const alertOptions = {
  timeout: 3000,position: "top center",};

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser);
  }

  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Router>
            <Fragment>
              <Header />
              <Alerts />
              <div className="container">
                <Switch>
                  <PrivateRoute exact path="/" component={Dashboard} />
                  <PrivateRoute
                    exact
                    path="/feed"
                    component={MainFeed}
                    {...store}
                  />
                  <Route exact path="/register" component={Register} />
                  <Route exact path="/login" component={Login} />
                </Switch>
              </div>
            </Fragment>
          </Router>
        </AlertProvider>
      </Provider>
    );
  }
}
export default App;
// ReactDOM.render(<App />,document.getElementById("app"));

我的自定义路线组件是PrivateRoute，我将道具传递给其他道具。

PrivateRoute.js：

import React from "react";
import { Route,Redirect } from "react-router-dom";
import { connect } from "react-redux";

const PrivateRoute = ({ component: Component,auth,...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (auth.isLoading) {
        return <h2>Loading...</h2>;
      } else if (!auth.isAuthenticated) {
        return <Redirect to="/login" />;
      } else {
        console.log(props);
        return <Component {...props} />;
      }
    }}
  />
);

const mapStateToProps = (state) => ({
  auth: state.auth,});

export default connect(mapStateToProps,null,{ pure: false })(
  PrivateRoute
);

好吧，这是Dashboard组件中问题的怪异部分，该组件使Pets组件一切正常，并连接到商店。

Dashboard.js：

import React,{ Fragment } from "react";
import Form from "./Form";
import Pets from "./Pets";

export default function Dashboard() {
  return (
    <Fragment>
      <Form />
      <Pets />
    </Fragment>
  );
}

Pets.js

import React,Fragment } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { getPets,deletePet,getAllPets } from "../../actions/pets";

import UserPetsStyle from "../../style/LayoutStyle";
import DeleteIcon from "@material-ui/icons/Delete";

import {
  Paper,Table,TableBody,TableCell,TableContainer,TableHead,TableRow,} from "@material-ui/core";

export class Pets extends Component {
  static propTypes = {
    pets: PropTypes.array.isRequired,getPets: PropTypes.func.isRequired,deletePet: PropTypes.func.isRequired,getAllPets: PropTypes.func.isRequired,};

  componentDidMount() {
    console.log(this.props);
    this.props.getPets();
  }

  render() {
    const classes = UserPetsStyle;
    return (
      <Fragment>
        <h2>Pets</h2>
        <TableContainer component={Paper}>
          <Table className={classes.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell align="right">ID</TableCell>
                <TableCell align="right">Name</TableCell>
                <TableCell align="right">Race</TableCell>
                <TableCell align="right">Create At</TableCell>
                <TableCell align="right">Actions</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {this.props.pets.map((pet) => (
                <TableRow key={pet.id}>
                  <TableCell align="right">{pet.id}</TableCell>
                  <TableCell align="right">{pet.name}</TableCell>
                  <TableCell align="right">{pet.race}</TableCell>
                  <TableCell align="right">{pet.created_at}</TableCell>
                  <TableCell align="right">
                    <DeleteIcon
                      onClick={this.props.deletePet.bind(this,pet.id)}
                      className="btn btn-danger btn-sm"
                    />
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  pets: state.pets.pets,{ getPets,getAllPets })(
  Pets
);

我的MainFeed / FeedList甚至没有调用connect函数。

MainFeed.js：

import React,{ Fragment } from "react";
import { FeedList } from "../feed/FeedList";

export default function MainFeed() {
  return (
    <Fragment>
      <FeedList />
    </Fragment>
  );
}

FeedList.js

import React,Fragment } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import UserPetsStyle from "../../style/LayoutStyle";

import { getAllPets } from "../../actions/pets";
import {
  Paper,} from "@material-ui/core";

export class FeedList extends Component {
  static propTypes = {
    pets: PropTypes.array.isRequired,};

  componentDidMount() {
    console.log(this);
    // this.props.getAllPets();
  }

  render() {
    const classes = UserPetsStyle;
    return (
      <Fragment>
        <h2>Pets</h2>
        <TableContainer component={Paper}>
          <Table className={classes.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell align="right">ID</TableCell>
                <TableCell align="right">Name</TableCell>
                <TableCell align="right">Race</TableCell>
                <TableCell align="right">Create At</TableCell>
                <TableCell align="right">Actions</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {/* {this.props.pets.map((pet) => (
                <TableRow key={pet.id}>
                  <TableCell align="right">{pet.id}</TableCell>
                  <TableCell align="right">{pet.name}</TableCell>
                  <TableCell align="right">{pet.race}</TableCell>
                  <TableCell align="right">{pet.created_at}</TableCell>
                  <TableCell align="right"></TableCell>
                </TableRow>
              ))} */}
            </TableBody>
          </Table>
        </TableContainer>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    pets: state.pets.pets,};
};

export default connect(mapStateToProps,{ getAllPets })(FeedList);

有什么想法吗？

为进一步帮助您，我在connect func上尝试了withRouter方法和{pure：false}选项，但似乎没有任何变化。此外，在使用reduxDevTools和DevTools时，似乎在FeedList.js组件上未调用mapStateToProps。

感谢您的时间！

解决方法

connect dispatch的第二个参数应该这样发送：

const mapDispatchToProps = dispatch => {
  return {
    // dispatching plain actions
    getAllPets: () => dispatch(getAllPets())
   
  }
}

我实际上解决了它。问题是我不应该使用方括号（{FeedList}）导入组件FeedaList。

React组件不调用connect redux函数

如何解决React组件不调用connect redux函数

解决方法

相关推荐