在 ComponentDidUpdate 调用异步后 React-Native 不合并道具

Question

我正在学习如何在 react-native 中设置异步 api 调用。我正在使用公理。我正在 ComponentDidMount 发送一个成功 changing/updating 我的一般状态的调度。问题是我似乎无法使用这个 "data."

import React, { Component, PropTypes } from 'react'
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import { getMakes} from "../actions/getPrice"
import * as PriceActions from '../actions/getPrice'


@connect((store) => {
  return {
    cars: store.cars
  };
})
export default class CounterContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
        cars: {

        }
    }
  }

  componentDidMount() {
    this.props.dispatch(getMakes())
  }


  render() {
    return (
      <View style={styles.container}>

        <TouchableOpacity>
          <Text style={styles.back}>Data: {this.props.cars.modelsCount}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

既然动作正常，那一定是我的reducer有问题吧？如下：

function getPrice(state={
    cars: [],
    fetching: false,
    fetched: false,
    error: null,
  }, action) {
    switch (action.type) {
      case "FETCH_CARS": {
        return {...state, fetching: true}
      }
      case "FETCH_CARS_REJECTED": {
        return {...state, fetching: false, error: action.payload}
      }
      case "FETCH_CARS_FULFILLED": {
        return {
          ...state,
          fetching: false,
          fetched: true,
          cars: action.payload,
        }
      } 
    }
    return state
}

export default getPrice;

Answer 1

mapStateToProps 将整个状态树作为第一个参数。如果屏幕截图上的 state 是您的完整 redux 状态，那么 connecto 应该如下所示：

@connect((store) => {
  return {
    cars: store.priceReducer.cars
  };
})

在 ComponentDidUpdate 调用异步后 React-Native 不合并道具

React-Native Not Merging Props After ComponentDidUpdate call to Async

asynchronous

store

reducers

react-native

axios