Глобальное состояние, сбрасывающее локальное состояние в React Native - PullRequest
Новая
       47

Глобальное состояние, сбрасывающее локальное состояние в React Native

0 голосов
/ 17 октября 2019

У меня есть как глобальный объект состояния избыточного состояния, так и локальный объект для обработки пользовательского интерфейса в компоненте.

Проблема состоит в том, что изменение состояния избыточности сбрасывает мое локальное состояние / состояние компонента.

Есть ли способ предотвратить это?

Мой код 

// component
constructor(props) {
    super(props);
    this.state = {
        location:5,
    }

onOtherLocationChange(text) {
    this.props.otherLocationChanged(text);
}

// in render
// the location is set to the correct value, and button is selected on click
<Button active={this.state.location === 6 ? true : false}
    onPress={() => this.setState({ location: 6 })}> // updating the local state
    <Text>LOCATION 6</Text>
</Button>
<Button active={this.state.location === 5 ? true : false}
    onPress={() => this.setState({ location: 5 })}> // updating the local state
    <Text>LOCATION 5</Text>
</Button>
<Button
    last active={this.state.location === 7 ? true : false} // updating the local state
        onPress={() => this.setState({ location: 7 })} >
    <Text>LOCATION 7</Text>
</Button>

 // text input that changes value in global state
 // this text input is displayed, but writing anything resets state back to 5
 if(this.state.location == 7) {
        return (
            <Item stackedLabel>
                <Label>Adresa mjesta rada</Label>
                <Input value={this.props.other_location} onChangeText={this.onOtherLocationChange.bind(this)} />
            </Item>
        )
    }

Запись в текстовом поле запускает обновление состояния избыточности 

// reducer, there is no location prop in the initial state object
...
case JOB_OTHER_LOCATION_CHANGED:
        // after this location resets back to 5
        return { ...state, other_location: action.payload, error: '' };
 default:
        return state;

ДействиеСоздатель: 

export const otherLocationChanged = (text) => {
    return {
       type: JOB_OTHER_LOCATION_CHANGED,
       payload: text
    };
};

1 Ответ

0 голосов
/ 18 октября 2019

Проблема заключалась в том, что функция setState () вызывалась в конце componentDidUpdate ()

Я добавил проверку, чтобы увидеть, обновлялись ли нужные реквизиты перед вызовом этого setState.

...