Question

我正在使用反应和还原的thunk。我的动作创建者执行API调用并返回属性中的数据＆＃34; data＆＃34;我的reducer返回该对象。我将此返回的对象映射到组件中的props。它是一个包含16个项目的数组（每个项目都是一个图像网址）。当我在console.log（这个）时，我可以点击查看数据，但如果我更进一步，如console.log（this.props.showGallery.imageLinks），则显示未定义。

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

我是否错误地理解了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;

TOP LEVEL COMPONENT（主要成分）

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

我假设您在创建商店时，只有一个减速器。如果是这种情况那么你的假设是关于＆＃39; state.showGallery＆＃39;现有的并不存在。相反，imageLinks将处于没有＆＃39; showGallery＆＃39;。

的状态

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

showGallery: { imageLinks: state.imageLinks },

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

1 个答案: