Javascript 调用组件渲染时，Redux数据未定义

我正在利用thunk与react和redux。我的action creator执行API调用并返回属性“data”中的数据，而我的reducer返回该对象。我已将此返回对象映射到组件中的道具。它是一个由16个项目组成的数组（每个项目都是一个图像url）。当我使用console.log（这个）时，我可以点击查看数据，但是如果我进一步使用console.log（这个.props.showGallery.imageLinks），它会显示undefined

另一种情况是，当我呈现{this.props.showGallery.imageLinks}时，我可以清楚地看到网页上数组中项目的所有文本，但当我在其上使用.map时，控制台会说无法读取未定义的属性“map”，网页只是空的。我做错了吗？我怎样才能使这些数据正常

我是否错误地理解了redux的概念

操作.js

export const SHOW_GALLERY = 'SHOW_GALLERY';
import axios from 'axios';



// FETCH THE IMAGES
export const actionGallery = () => {
  return ( dispatch ) => {
    axios.get('../images')
    .then(res => {
      if (res.status === 200) {
        return dispatch({ type: SHOW_GALLERY, data: [...res.data] });
      }
    })
    .catch(err => console.error(err));
  }
}

减速器 images.js

import { HEAD_SELECTED, SHOW_GALLERY } from '../actions/actions';
import { actionSelectHeadImg } from '../actions/actions';
import { actionGallery } from '../actions/actions';


// Show the image links from an array
export function showGallery(state={}, action) {
  switch(action.type) {
    case SHOW_GALLERY:
      return Object.assign({}, state, { imageLinks: new Array(action.data) })
    default:
      return state;
    }
  }

组合减速器用于上述：

import React from 'react';
import { combineReducers } from 'redux';
import { showGallery, headSelected } from './images';

// Combine all your reducers to this
const allReducers =  combineReducers({
  showGallery,
  headSelected
});

export default allReducers;

组件/容器 Gallery.js

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionGallery } from '../actions/actions';
import cheerio from 'cheerio';

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
    this.props.actionGallery();
  }
  render() {
    return (
      <div>
        <h1>This is the Gallery.</h1>
        <br />
        <div className="container">
          <div className="row">
              <div className="col-md-8">
                <h2>H2 h2 h2 2h2 </h2>
                { this.props.showGallery.imageLinks.forEach((i, index) => {
                  <p>i</p>
                }) }
              </div>
          </div>
        </div>
      </div>
    );
  }
}



function mapStateToProps(state) {
  return {
    showGallery: state.showGallery,
    headSelected: state.headSelected,
    newState: state
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    actionGallery,
    actionSelectHeadImg
  }, dispatch)
}


export default connect(mapStateToProps, mapDispatchToProps)(Gallery);

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../actions/actions”导入{actionGallery}；
从“cheerio”导入cheerio；
类库扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
this.props.actionGallery（）；
}
render（）{
返回(
这是画廊。


H2H22H2
{this.props.showGallery.imageLinks.forEach（（i，索引）=>{
我

}) }
);
}
}
函数MapStateTops（状态）{
返回{
展厅：state.showGallery，
当选校长：州。当选校长，
新闻状态：状态
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators({
行动画廊，
actionSelectHeadImg
}，调度）
}
导出默认连接（mapStateToProps、mapDispatchToProps）（图库）；

仅容纳其他容器/组件的常规组件

import React from 'react';
import ReactDOM from 'react-dom';
import Gallery from './containers/Gallery';
import HeadingImg from './containers/HeadingImg';

class App extends React.Component {
  render() {
    //console.log(this.props.actionGallery())
    return (
      <div>
        <center>
          <h3>SELECTED IMAGE:</h3>
          <br />
          <HeadingImg />
          <hr />
          <Gallery />
        </center>
      </div>
    );
  }
}

export default App;

从“React”导入React；
从“react dom”导入react dom；
从“./containers/Gallery”导入库；
从“./containers/HeadingImg”导入HeadingImg；
类应用程序扩展了React.Component{
render（）{
//console.log（this.props.actionGallery（））
返回(
所选图像：



);
}
}
导出默认应用程序；

顶级组件（主要组件）

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“../Components/Earth/App”导入应用程序；
从“../Components/Earth/reducers”导入所有减速器；
从“redux thunk”导入thunk；
const store=createStore（allReducers，applyMiddleware（thunk））；
ReactDOM.render(
，document.getElementById（“根”）；

我假设当你创建商店时，你只有一个减速机。如果是这样的话，那么你关于“state.showGallery”的假设就不存在了。相反，imageLinks将处于没有“showGallery”的状态

如果我的假设是正确的，那么您应该将mapStateToProps更改为将showGallery设置为：

showGallery: { imageLinks: state.imageLinks },

---

我假设当你创建你的商店时，你只有一个减速机。如果是这样的话，那么你关于“state.showGallery”的假设就不存在了。相反，imageLinks将处于没有“showGallery”的状态

如果我的假设是正确的，那么您应该将mapStateToProps更改为将showGallery设置为：

showGallery: { imageLinks: state.imageLinks },

---

我重新编辑了我原来的帖子。减速器连接到一个对象中，并传递到存储中。这会改变你的答案吗？是的。。。好的，那么问题是你的初始状态是一个空对象！只有使用操作创建imageLinks，imageLinks才会存在。我建议将具有“state={}”的行更改为“state=initialState”，其中initalState定义为{imageLinks:[]}。我声明了initialState={imageLinks:[]}，然后将其作为参数state=initialState传递给reducer函数，但它仍然未定义。我很困惑，我重新编辑了我原来的帖子。减速器连接到一个对象中，并传递到存储中。这会改变你的答案吗？是的。。。好的，那么问题是你的初始状态是一个空对象！只有使用操作创建imageLinks，imageLinks才会存在。我建议将具有“state={}”的行更改为“state=initialState”，其中initalState定义为{imageLinks:[]}。我声明了initialState={imageLinks:[]}，然后将其作为参数state=initialState传递给reducer函数，但它仍然未定义。我很困惑