Redux状态已更新，但屏幕未更新

Question

我遇到的情况是我正确地更新了redux状态，并且应用程序中的屏幕在不更改为其他屏幕然后再次返回的情况下无法显示该状态的新值。

在selectedProduct视图中，数据对象为product/details/view.js。

通过使用Redux Reselect选择器捕获

selectedProduct。我正在控制台中记录选择器的结果，该选择器经常运行，并且它最初返回旧的selectedProduct，因此“描述”为“ 1234”，但随后返回“描述”“ 12345”，并且product/details/view.js未更新那个价值。

为什么产品详细信息屏幕最初不会显示更新的信息？

console.log从选择器返回的值：

代码：

product / details / view.js

import { updateEditProductId, updateEditShopId } from '../edit/product/action'
import { updateEditProductPrice } from '../edit/priceInput/action'
import { updateEditProductDescription } from '../edit/descriptionInput/action'
import { updateEditProductImage } from '../edit/imagePicker/action'
import { connect } from 'react-redux'
import { searchPageStyle } from '../add/goButton/style'
import React from 'react'
import { View, Text, Image } from 'react-native'

import EditButton from '../search/results/editButton/view'

import { Button, CardItem, Card } from 'native-base'

import { getSelectedProduct, getSelectedProductProduct } from '../search/results/map/selector'

const mapStateToProps = (state): Object => ({
  imagePicker: state.product.edit.imagePicker,
  editPrice: state.product.edit.priceNumberInput.value,
  editDescription: state.product.edit.descriptionInput.value,
  selectedShop: getSelectedProduct(state),
  selectedProduct: getSelectedProductProduct(state),
})

const mapDispatchToProps = (dispatch: Dispatch<*>): any => ({
  updateEditProductId: (id: number) => {
    dispatch(updateEditProductId(id))
  },
  updateEditShopId: (id: number) => {
    dispatch(updateEditShopId(id))
  },
  updateEditImage: (image: string) => {
    dispatch(updateEditProductImage(image))
  },
  updateEditPrice: (price: number) => {
    dispatch(updateEditProductPrice(price.toString()))
  },
  updateEditDescription: (description: string) => {
    dispatch(updateEditProductDescription(description))
  }
})

let ProductDetailsView: StatelessFunctionalView<any> = (
  props: EditButtonProps
): React$Element<any> => {

  console.log(props.selectedProduct)
  return (
    <View
      style={{
        width: '100%',
        alignItems: 'center'
      }}>
      {props.selectedProduct.image ? (
        <Image
          style={{
            width: 200,
            height: 200,
            borderRadius: 8,
            marginBottom: 10,
            zIndex: 45
          }}
          source={{
            uri: props.selectedProduct.image
          }}
        />
      ) : (
        <Image
          style={{
            width: 200,
            height: 200,
            borderRadius: 8,
            marginBottom: 10,
            zIndex: 45
          }}
          source={require('../../../images/noimage.png')}
        />
      )}

      <Card
        style={{
          marginBottom: 10,
          flex: 1,
          flexDirection: 'column',
          borderRadius: 8,
          elevation: 0,
          shadowColor: 'transaparent',
          shadowOffset: {
            width: 0,
            height: 0
          },
          shadowRadius: 0,
          shadowOpacity: 0
        }}>
        <CardItem
          style={{
            flex: 1,
            flexDirection: 'column',
            backgroundColor: '#E9C893',
            borderRadius: 8,
          shadowColor: 'transaparent',
          shadowOffset: {
            width: 0,
            height: 0
          },
          shadowRadius: 0,
          shadowOpacity: 0,
            alignItems: 'center'
          }}>
          <Text
            style={{
              color: '#7c6a4d',
              marginBottom: 5
            }}>
            {props.selectedProduct.brand}
          </Text>
          <Text
            style={{
              color: '#7c6a4d',
              marginBottom: 15
            }}>
            {props.selectedProduct.name}
          </Text>
          <Text
            style={{
              color: '#7c6a4d',
              marginBottom: 15
            }}>
            {props.selectedProduct.description}
          </Text>
          <Text
            style={{
              color: '#7c6a4d',
              marginBottom: 10
            }}>
            price:{' '}
            {props.selectedProduct.price
              ? props.selectedProduct.price + ' of your local currency'
              : 'not entered'}
          </Text>
        </CardItem>
      </Card>
      <EditButton
        scrollToZero={props.scrollToZero}
        forceUpdate={props.forceUpdate}
        setEditMode={props.setEditMode}
      />
      <Button
        block
        style={{
          ...searchPageStyle.goButton,
          marginBottom: 15,
          backgroundColor: '#27a562'
        }}
        onPress={() => props.handleHelp()}>
        <Text style={{ color: '#FFFFFF' }}>Report</Text>
      </Button>
    </View>
  )
}

ProductDetailsView = connect(
  mapStateToProps,
  mapDispatchToProps
)(ProductDetailsView)

export default ProductDetailsView

产品/搜索/结果/地图/selector.js

import { createSelector } from 'reselect'
import type { State } from '../../../../../sharedModels'
import type { Product } from '../../../models/entity'

const productsSelector = (state: State): Product => {
  return state.product.search.results.results
}

export const getSelectedProduct: Product = createSelector(
  (productsSelector: Function),
  products => {
    const selected = products.filter(product => product.shop.selected)
    return selected[0]
  }
)

export const getSelectedProductProduct = (state): ?Product => {
  const selectedShopProducts: Product | null = getSelectedProduct(state) ? getSelectedProduct(state).products : undefined
  console.log(selectedShopProducts)
  const finalProduct = selectedShopProducts ? selectedShopProducts.find(product => product.selected) : undefined
  console.log(finalProduct)
  return finalProduct
}