获取数组中的数据

Question

我试图在Twitch Api的帮助下制作一个流媒体应用程序。我使用React和Redux。这是我尝试用redux构建的第一个真正的应用程序，所以我可能会错过一些东西。

问题是我可以看到React devtools我在我的道具里面有20个对象里面的流。我可以使用JSON.stringify进行可视化但不能执行map或for循环，因为我无法使用长度。当我尝试映射时，我得到的地图不是函数。

streamReducer.js

import * as types from '../constants/';
/*>>>>>>=============================================<<<<<<*/
const streamReducer = (streams = { isFetched: false }, action) => {
    switch (action.type) {
        case `${types.RECEIVE_STREAMS}_PENDING`:
            return {};
        case `${types.RECEIVE_STREAMS}_FULFILLED`:
            return {
                streams: action.payload,
                err: null,
                isFetched: true
            };
        case `${types.RECEIVE_STREAMS}_REJECTED`:
            return {
                streams: null,
                err: action.payload,
                isFetched: true
            };
        default:
            return streams;
    }
};
/*>>>>>>=============================================<<<<<<*/
export default streamReducer;

StreamApp.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
/*>>>>>>=============================================<<<<<<*/

import StreamsList from '../components/StreamsList';
/*>>>>>>=============================================<<<<<<*/

const StreamsApp = React.createClass ({
    render() {
        return (
            <div>
                Streaming
                <StreamsList {...this.props.stream} />
            </div>
        );
    }
});

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

/*>>>>>>=============================================<<<<<<*/

export default connect(mapStateToProps)(StreamsApp);

routeActions.js

   import {
        reqStreams
    } from './streamActions';
    /*>>>>>>=============================================<<<<<<*/
    export const boundAllStreams = (nextState, replaceState) => reqStreams(nextState);

我的路线

import React from 'react';
import { Router, Route, IndexRoute } from 'react-router';
import { bindActionCreators } from 'redux';
/*>>>>>>=============================================<<<<<<*/

import { history } from '../store/configureStore';
import store from '../store/configureStore';
import * as routeActions from '../actions/routeActions';
/*>>>>>>=============================================<<<<<<*/

import App from '../containers/App';
import StreamsApp from '../containers/StreamsApp';
/*>>>>>>=============================================<<<<<<*/

import Home from '../components/layout/Home';
import Games from '../components/layout/Games';
import NoMatch from '../components/layout/NoMatch';
/*>>>>>>=============================================<<<<<<*/

const boundRouteActions = bindActionCreators(routeActions, store.dispatch);

export default (
    <Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Home} />
            <Route path="streams" component={StreamsApp} onEnter={boundRouteActions.boundAllStreams}/>
            <Route path="games" component={Games}/>
            <Route path="*" component={NoMatch}/>
        </Route>
    </Router>
);

StreamsList.js

import React from 'react';
/*>>>>>>=============================================<<<<<<*/

const StreamsList = ({ streams }) => {
    console.log(streams);
    return (
        <div>
            {JSON.stringify(streams)}
            {streams.map((stream) => {
                return (
                    <div>
                        <h1>{stream.game}</h1>
                    </div>
                );
            })}
        </div>
    );
};

export default StreamsList;

在这里你可以看到我得到的JSON.stringify（streams）

使用ReactDevTool

我的地图错误

Answer 1

我正在写一个答案，而不是继续在评论中进行对话，因为这很难在狭窄的空间中输入;

请尝试：

const StreamsList = ({ streams }) => {
    console.log(streams);
    streamArray = [];
    if(streams){
        streamArray = streams.map((stream) => {
            return (
                <div>
                    <h1>{stream.game}</h1>
                </div>
            );
        });
    }

    return (
        <div>
            {JSON.stringify(streams)}
            {streamArray}
        </div>
    );
};

export default StreamsList;

Answer 2

我找到了另一种方式。

<强> StreamApp.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
/*>>>>>>=============================================<<<<<<*/

import StreamsList from '../components/StreamsList';
/*>>>>>>=============================================<<<<<<*/

const StreamsApp = ({ streams, err, isFetched }) => {
    if (!isFetched) {
        return <h1>Loading...</h1>;
    } else if (err === null) {
        return (
            <div>
                Streaming
                <StreamsList streams={streams} />
            </div>
        );
    } else {
        return <h1>Cannot find streams</h1>;
    }
};

const mapStateToProps = (state) => state.streams;

/*>>>>>>=============================================<<<<<<*/

export default connect(mapStateToProps)(StreamsApp);

<强> StreamsList.js

import React from 'react';
import { Link } from 'react-router';
import { GridList } from 'material-ui/GridList'; // http://www.material-ui.com/#/components/grid-list
/*>>>>>>=============================================<<<<<<*/
import StreamsListSingle from './StreamsListSingle';
/*>>>>>>=============================================<<<<<<*/

const StreamsList = ({ streams }) => {
    return (
        <div style={styles.root}>
            <GridList
                cellHeigth={200}
                cols={4}
                style={styles.gridList}>
                {streams.map((stream) => (
                    <Link
                        to={`/streams/${stream.channel.name}`}
                          key={`${stream._id}_Link`}
                          params={stream.channel.name}>
                        <StreamsListSingle key={stream._id} {...stream} />
                    </Link>
                ))}
            </GridList>
        </div>
    );
};

export default StreamsList;

const styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around'
    },
    gridList: {
        width: 'max',
        height: 'auto',
        marginBottom: 24
    }
};