Question

我有两个使用相同缩减器且共享相同状态的组件。

第一个是表单，第二个是单独的组件使用更新该表单的特定字段 反应天然-自动完成选
在第二个组件中，一切正常。但是当我回来的时候到第一个组件（表格），我正在更新的道具第二个组件现在未定义。 仅在我离开组件时并回到它或重新加载我的应用程序组件显示正确的价值。

我是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 ...是否已定义？您是否在文件顶部有正确的import语句？

Answer 2

好的，所以我的问题来自我的SAVE_X中的reducer：

我有：

case SAVE_X:
      return { state };

而不是：

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

组件未在react native redux app中更新

2 个答案: