Question

我是新手做出反应。我有一个类似下面的导航栏

import React, { Component, PropTypes } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

class MainNav extends Component {

    constructor(props) {
        super(props);
        this.state = {
         loggedIn: 1,
        };
    }
    render() {
        return (
             <div>
                <Navbar inverse collapseOnSelect>
                    <Navbar.Header>
                        <Navbar.Brand>
                            <a href="/">SportsSpot</a>
                        </Navbar.Brand>
                    <Navbar.Toggle />
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav>
                            <LinkContainer to="/nfl">
                               <NavItem>NFL</NavItem>
                            </LinkContainer>
                            <LinkContainer to="/mlb">
                               <NavItem>MLB</NavItem>
                            </LinkContainer>
                            <LinkContainer to="/nba">
                               <NavItem>NBA</NavItem>
                            </LinkContainer>
                            <LinkContainer to="/nhl">
                               <NavItem>NHL</NavItem>
                            </LinkContainer>   
                        </Nav>
                    <Nav pullRight>
                        <LinkContainer to="/login">
                                <NavItem>Login</NavItem>
                        </LinkContainer>
                        <LinkContainer to="/signup">
                            <NavItem>Sign Up</NavItem>
                        </LinkContainer>
                    </Nav>
                    </Navbar.Collapse>
                </Navbar>
                <div className="content">
                        {this.props.children}
                </div>
            </div>
        )
    }
}

MainNav.propTypes = {
  children: PropTypes.element.isRequired,
};

export default MainNav;

我试图在用户点击导航栏中的任何链接时向服务器发送操作，以便获取相应的数据。我的动作创建者文件如下所示

export function getCurrentAllNews() {
    return {
        meta: { remote: true },
        type: 'GET_CURRENT_ALL_NEWS'
    };
}

export function getCurrentNBANews() {
    return {
        meta: { remote: true },
        type: 'GET_CURRENT_NBA_NEWS'
    };
}


export function getCurrentNHLNews() {
    return {
        meta: { remote: true },
        type: 'GET_CURRENT_NHL_NEWS'
    };
}


export function getCurrentNFLNews() {
    console.log("it comes here:");
    return {
        meta: { remote: true },
        type: 'GET_CURRENT_NFL_NEWS'
    };
}


export function getCurrentMLBNews() {
    return {
        meta: { remote: true },
        type: 'GET_CURRENT_MLB_NEWS'
    };
}


export function setConnectionState(state, connected) {
    return {
        type: 'SET_CONNECTION_STATE',
        state,
        connected
    };
}

因此，例如当用户点击指向NFL的链接时，我想添加类似

的内容

<LinkContainer to="/nfl">
      <NavItem onClick={this.props.getCurrentNFLNews} eventKey={1}>NFL</NavItem>
 </LinkContainer>

这样我就可以为nfl调度相应的操作并从服务器获取所需的数据

我读到来自'react-redux'的连接可以用来连接回调函数和动作创建者。因为我必须使用像

这样的代码

export const MainNavContainer = connect(mapNavToProps,actionCreators)(MainNav);

但问题是连接不适用于已经在其下定义了一些路由的导航栏。我有一个如下的路线文件

import MainNav from './components/navbar.jsx';
const routes =<MainNav>
    <App>
    <Switch>
        <Route exact path="/" component={HomePageContainer}/>
        <Route exact path="/nfl" component={NFLHomePageContainer}/>
        <Route path ="/login" component = {LoginPage}/>
        <Route path ="/signup" component = {SignUpPage}/>
    </Switch>
    </App> 
</MainNav>;

因此，尝试将连接添加到navbar.jsx会引发以下错误

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

我的index.jsx有以下提供商代码

ReactDOM.render((
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Provider store={store}>
      <Router>{routes}</Router>
    </Provider>
  </MuiThemeProvider>), 
        document.getElementById('root')
);

我不知道如何解决这个问题。我还想知道如何在从服务器接收数据后重定向，以便在新页面中不显示错误的信息。提前获得帮助

Answer 1

由于您的行动的性质似乎是asynchronous，我建议您使用＆＃34; redux-thunk＆＃34;虽然这不是绝对必要但是让事情变得更容易。

在您的动作创建者中 -

export function updateNHLNewaResults(newsList) {
    return {
        type : UPDATE_NHL_NEWS_RESULTS,
        newsList
    };
}

export function getCurrentNHLNews() {
    return dispatch => {
        return Api.getCurrentNHLNews()
            .then( res => {
                dispatch(updateNHLNewaResults(res));
            });
    };
}

Api.getCurrentNHLNews()基本上你会在这里提出网络请求以获取新闻列表或其他内容。您可能需要创建不同的函数来生成diff api请求。

现在您需要通过商店连接到组件下面的代码仅用于说明 -

import { getCurrentNHLNews }  from '../../actions/news-actions';

// Other code related to Component

// Now you can call getCurrentNHLNews to dispatch async action
  <NavItem onClick={this.props.getCurrentNHLNews} eventKey={1}>NFL</NavItem>


LinkContainer.propTypes = {
    getCurrentNHLNews : PropTypes.func.isRequired
}

export default connect(null , { getCurrentNHLNews })(LinkContainer);

您可能希望根据需要订阅某个州的部分，而不是将null作为第一个参数传递。

如何从React

1 个答案: