Question

在我使用React和Redux之后，我遇到了一个问题，外观简单，但很难解决：我用一个非常大的JSON对象设置我的Redux状态。这些数据是从异步调用中检索的。当我设置它时，我使用

在我的reducer中创建了一个条目

let initialState = {
  pages: []
}

然后，我将不同的页面及其参数和数据放入此pages数组中。到目前为止，状态已经很好了。

但是，我的不同应用页面只使用了你想象的部分内容。例如，我有一个名为Gallery的页面，可能需要我的州看起来像这样：

"pages": [
  {
    "component":"Gallery",
    "key": "gallery",
    "title": "Galerie photos",
    "url": "/galerie-photos",
    "sections": [
      {
        "component": "Gallery",
        "params": {
          "images": [
            {
              "id": 1,
              "src": "http://lorempicsum.com/futurama/627/300/1",
              "alt": "alternate text"
            },
            {
              "id": 2,
              "src": "http://lorempicsum.com/futurama/500/400/2",
              "alt": "alternate text"
            },
            {
              "id": 3,
              "src": "http://lorempicsum.com/futurama/400/320/3",
              "alt": "alternate text"
            },
            {
              "id": 4,
              "src": "http://lorempicsum.com/futurama/800/500/4",
              "alt": "alternate text"
            },
            {
              "id": 5,
              "src": "http://lorempicsum.com/futurama/320/300/5",
              "alt": "alternate text"
            },
            {
              "id": 6,
              "src": "http://lorempicsum.com/futurama/420/360/6",
              "alt": "alternate text"
            }
          ]
        }
      }
    ]
  }
]

在我的GalleryContainer中，我只请求images属性，因为这是我Gallery组件的唯一问题。我能够毫无问题地检索这些数据。使用以下代码进行测试将返回所需的图像数组：

但据我测试过，我的Gallery组件无法检索图像：当控制台登录组件端时，我得到undefined，而在容器端，没问题。

我测试了一些不同的东西：我通过reducer设置了一个galleryImages属性，并直接用图库图像设置它。这很有用。

问题是：为什么它不能在第一种情况下起作用，而在第二种情况下起作用？我是否只能使用仅设置为状态属性的数据？我不能拥有超级＆＃34; json设置在我的州直接工作？

感谢我点亮了这个:)

＆＃13;

// Component
import React from 'react'

const Gallery = ({images}) => (
  <div>
    {images.map((image, key) =>
      <div key={key} className="image-element-class" style={card}>
        <img src={image.src} alt={image.alt} style={imageStyle}/>
      </div>
    )}
  </div>
)

const card = {
  width: 'calc((100% / 3) - (15px / 1.5))',
  marginBottom: '15px',
  boxSizing: 'border-box'
}

const imageStyle = {
  width: '100%'
}

export default Gallery

// Container
import { connect } from 'react-redux'
import Gallery from '../../components/pages/Gallery'

const getImages = state => {

  return {
    images: state.data.pages.filter(page => page.component === 'Gallery' &&(
      page.sections.filter(section => section.component === 'Gallery' &&(
        section.params.images
      ))
    )),
  }
}

const mapStateToProps = state => {
  return getImages(state)
}

const GalleryContainer = connect(
  mapStateToProps,
  {}
)(Gallery)

export default GalleryContainer

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>

＆＃13;

解析Redux状态道具的正确方法 - 使用超级json对象

0 个答案: