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

Question

我正在使用带有 react 和 redux 的 thunk。我的动作创建者执行 API 调用并在属性“数据”中返回数据，我的减速器返回该对象。我将此返回的对象映射到组件中的道具。它是一个包含 16 个项目的数组（每个项目都是一个图像 url）。当我使用 console.log(this) 时，我可以点击查看数据，但如果我更进一步，例如 console.log(this.props.showGallery.imageLinks)，它会显示未定义。

另一种情况是，当我渲染 { this.props.showGallery.imageLinks } 时，我可以在我的 网页 上清楚地看到数组中项目的所有文本，但是当我使用 .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);

一个常规组件，只包含其他容器/组件

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;

顶级组件（主要组件）

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from '../Components/Earth/app';
import allReducers from '../Components/Earth/reducers';
import thunk from 'redux-thunk';



const store = createStore(allReducers, applyMiddleware(thunk));


ReactDOM.render(
  <Provider store={store}>
    <App store={store}/>
  </Provider>
, document.getElementById("root"));

Answer 1

我假设当您创建商店时，您只有一个减速器。如果是这种情况，那么您对“state.showGallery”存在的假设不会。相反，imageLinks 将处于没有“showGallery”的状态。

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

showGallery: { imageLinks: state.imageLinks },