组件未在反应本机 redux 应用程序中更新

Question

我有两个组件使用相同的 reducer 并共享相同的状态。

• 第一个是表单，第二个是单独的组件 使用更新该表单的特定字段 react-native-autocomplete-select.
• 在第二个组件中，一切正常。但是当我回来 到第一个组件（表单），我正在更新的道具 第二个组件现在未定义。 仅当我离开组件时 并回到它或重新加载我的应用程序组件是否显示 正确的值。

我是 redux 的新手，我以为我已经弄明白了，但显然，我仍然缺少一些东西。

我将尝试分享尽可能多的代码，以便任何人都可以轻松地帮助我，但如果您希望我分享其他代码，请告诉我。

我真的很想了解发生了什么。

第一个组件

class EditElem extends Component {

  componentWillMount() {
    this.props.xFetch();
  }

  onButtonPress() {
    const { name, description, elem_id } = this.props;

    this.props.xSave({ name, description, elem_id });
  }

  render() {

    return (
        <ScrollView>
          <View>
            <Text>Information</Text>
            <CardSection>
              <Input
                label="Name"
                placeholder="..."
                value={this.props.name}
                onChangeText={value => this.props.xUpdate({ prop: 'name', value })}
              />
              <Text style={styles.labelStyle}>Description</Text>
              <Input
                placeholder="Write here..."
                value={this.props.description}
                onChangeText={value => this.props.xUpdate({ prop: 'description', value })}
                multiline = {true}
                numberOfLines = {4}
              />
              <TouchableWithoutFeedback onPress={ () => Actions.selectElem() }>
                <View style={styles.wrapperStyle}>
                  <View style={styles.containerStyle}>
                    <Text style={styles.labelStyle}>Elem</Text>
                    <Text adjustsFontSizeToFit style={styles.inputStyle}>{checkElem(this.props.elem_id ? this.props.elem_id.toString() : "0")}</Text>
                  </View>
                </View>
              </TouchableWithoutFeedback>

            </CardSection>

            <Button title="Save Changes" onPress={this.onButtonPress.bind(this)} />
          </View>
        </ScrollView>

    );
  }
}

const mapStateToProps = (state) => {
  const { name, description, elem_id } = state.x.x;

  return { name, description, elem_id };
};

export default connect(mapStateToProps, { xUpdate, xFetch, xSave })(EditElem);

第二个组件

class SelectElem extends Component {

  componentWillMount() {
    this.props.xFetch();
  }

  saveElem(suggestion) {
    let elem_id = suggestion.id;
    let text = suggestion.text

    this.props.xUpdate({ prop: 'elem', text })
    this.props.xUpdate({ prop: 'elem_id', elem_id })

    this.props.xSave({ elem_id });
  }

  render() {

    const suggestions = data

    const onSelect = (suggestion) => {
      this.saveElem(suggestion);
    }

    return(
      <View style={{flex: 1}}>
        <AutoComplete
          placeholder={checkElem(this.props.elem_id ? this.props.elem_id.toString() : "0")}
          onSelect={onSelect}
          suggestions={suggestions}
          suggestionObjectTextProperty='text'
          value={this.props.elem}
          onChangeText={value => this.props.xUpdate({ prop: 'elem', value })}
          minimumSimilarityScore={0.4}
        />
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  const { elem_id, description, name, elem } = state.x.x;
  return { elem_id, description, name, elem };
};

export default connect(mapStateToProps, { xUpdate, xFetch, xSave })(SelectElem);

商店

const store = createStore(reducers, {}, compose(applyMiddleware(ReduxThunk)));

减速器

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case FETCH_X:
      return { ...state, x: { ...state.x, name: action.payload.name, description: action.payload.description, elem_id: action.payload.elem_id } };
    case UPDATE_X:
      return { ...state, x: { ...state.x, [action.payload.prop]: action.payload.value }};
    case SAVE_X:
      return state;
    default:
      return state;
  }
}

操作

export const xUpdate = ({ prop, value }) => {
  return {
    type: UPDATE_X,
    payload: { prop, value }
  };
};

export const xSave = ({ name, description, elem_id }) => {

  return (dispatch) => {
    axios({
      method: 'post',
      url: 'https:xxxxxxxxxxxxxxxxxxxx',
      data: {_____________________ }

      }
    }).then(response => {
      dispatch({ type: SAVE_X });
    }).catch(error => console.log(error))
  };
};

Answer 1

你能检查一下 UPDATE_X, SAVE_X ... 是否定义了吗？文件顶部是否有正确的导入语句？

Answer 2

好的，我的问题实际上来自于我的 SAVE_X 中的减速器：

我有：

case SAVE_X:
      return { state };

而不是这个：

case SAVE_X:
      return { ...state, elem: { ...state.elem, elem_id: action.payload.elem_id } };