Question

在Redux存储更新后，React Native组件的道具未更新。令我烦恼的是它曾经这样做，然后有一天，它停止了工作。

调度工作正常，并且商店正在正确更新状态而不会对其进行更改。

我尝试返回一个与旧状态无关的新对象，但是仍然没有运气。我也尝试过使用componentWillReceiveProps，但不会被调用。

组件

import React from 'react';
import { connect } from 'react-redux';
import { MonoText } from '../components/StyledText';
import { bindActionCreators } from 'redux';
import * as airportActions from '../../shared/redux/modules/airports';

class HomeScreen extends React.Component {
  render() {
    const { addAirports } = this.props;

    return (
      <View style={styles.container}>
        <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
          <View>
            <FlatList
              horizontal={true}
              data={this.props.airports.airports}
              renderItem={({item}) => <Text>{item.key + " "}</Text>}
              // extraData={this.state}
            />
          </View>
          <Button
            onPress={() => this.props.switchAirports()}
            title="SWITCH"
            color="#841584"
            accessibilityLabel="Learn more about this purple button"
          />
        </ScrollView> 
      </View>
    );
  }

const mapStateToProps = (state) => {
  const { airports } = state
  return { airports }
};

const mapDispatchToProps = dispatch => (
  bindActionCreators(airportActions, dispatch)
);

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

减速器

const SWITCH = 'airports/switch';

export default function reducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case SWITCH:
      const newState = Object.assign({}, state);
      [newState.airports[0], newState.airports[1]] = [newState.airports[1], newState.airports[0]];
      return newState
    default:
      return state
  }
};

export function switchAirports() {
  return { type: SWITCH }
}

组合减速器

import { combineReducers } from 'redux';
import airports from './airports';
import galleryState from './gallery'

export default combineReducers({
    galleryState,
  airports,
});

当我单击“切换”按钮时，我希望切换前两个机场。它们在商店中进行，当我再次单击“切换”后，它们将在商店中进行切换。但是这些状态更改永远不会反映组件的属性。

同样，它曾经可以工作，但是突然停止工作。不仅用于此组件，还用于另一个和另一个减速器。

Answer 1

我知道这已经快两年了，但是...

在您的 Reducer 代码中：Object.assign() 仅执行浅拷贝。所以你的 newState.airports 数组仍然指向 state.airports 数组。

这意味着 [newState.airports[0], newState.airports[1]] = [newState.airports[1], newState.airports[0]]; 正在改变状态 preventing the view from updating。

假设您的 state.airports 数组的深度为 1 并且您的状态没有进一步嵌套，请尝试：

...
  const newState = {...state, airports: [...state.airports]};
...

您可以阅读更多here。

商店更新后未更新的React Redux组件道具

1 个答案: