Question

我正在创建一个具有从主屏幕更改语言功能的网站，我正在使用Redux来处理状态。

我一直得到TypeError：无法读取未定义的属性'connect'，它似乎来自Home.js，我不知道为什么会发生!!，请帮助!!!

import React, { Component } from 'react';
import ReactRedux from 'react-redux';

import './Home.css';
import Navbar from '../../Reusable/Navbar/Navbar.js';
import Footer from '../../Reusable/Footer/Footer.js';
import Action from '../../Reusable/Action/Action.js';
import ProjectsCarousel from '../../Reusable/ProjectsCarousel/ProjectsCarousel.js';
import Getintouch from '../../Reusable/Getintouch/Getintouch.js';
import Header from './Header/Header.js';
import Info from './Info/Info.js';
import Whyus from './Whyus/Whyus.js';
import Testimonial from './Testimonial/Testimonial.js';
let actions = require('../../../actions');

class Home extends Component {
  render() {
        const content = this.props.content;
        const switchLanguage = this.props.switchLanguage;

        if (content){
              return (
                <div className="home">
                  <Action />
                  <Navbar data={content.page.menu} switchLanguage={switchLanguage}/>
                  <Header />
                  <Info  data={content.page.home}/>
                  <ProjectsCarousel />
                  <Whyus />
                  <Testimonial />
                  <Getintouch />
                  <Footer />
                </div>
              )
        } else {
          return;
        }

  }
}


module.exports = ReactRedux.connect(
  (state) => ({content: state.content}),
  (dispatch) => ({switchLanguage: (lang) => dispatch(actions.switchLanguage(lang))})
)(Home);

export default Home;

Answer 1

那是因为react-redux has only named exports。

将导入更改为：

import * as ReactRedux from 'react-redux';

将每个命名属性导入ReactRedux对象。或者像它一样导入：

import { connect } from 'react-redux';

export default connect(
  (state) => ({content: state.content}),
  (dispatch) => ({switchLanguage: (lang) => dispatch(actions.switchLanguage(lang))})
)(Home);

React / Redux更改网页语言

1 个答案: