Блог

Главная - Вопросы по программированию - Неожиданное изменение состояния реакции

Неожиданное изменение состояния реакции

#javascript #reactjs #state #immutability

#javascript #reactjs #состояние #неизменность

Вопрос:

Предположим, что есть два состояния, которые являются одним и тем же объектом, в какой-то момент времени использование setState для одного объекта также изменяет состояние другого объекта.

Позвольте мне объяснить это с помощью кода; 

 export default class AgentDetail extends Component {

    constructor(props) {

        super(props)
        this.state = {x: 1, y:1 }
    }

    componentDidMount() {

        let theObject = {
            someKey: 'someValue'
        }

        this.setState({
            x: theObject,
            y: theObject // I also tried with Object.create(theObject) and Object.assign({}, theObject)
        })

        this.changeStates()
    }

    changeStates() {

        let otherObject = {
            someKey: 'someOtherValue'
        }

        this.setState({
            x: otherObject
        })

        console.log(this.state.y) // { someKey: 'someOtherValue' }

    }

}

Я ожидаю, что y будет «someValue», но оно изменяется на x, и я не смог найти соединение.

Заранее спасибо

Комментарии:

1. Он не мутирует с x . setState Метод не синхронизирован , см. Красную заметку: вы просто проверяете y слишком рано. Вы можете использовать обратный вызов, чтобы что-то сделать, когда состояние было изменено : this.setState(..., function() { console.log(this.state.y); }); .

2. @lorenzo-s да, я знаю setState , что это асинхронный процесс, но не имеет значения, если я войду y в setState обратный вызов, результат будет тот же.

3. Тоже мне, все в порядке, я протестировал ваш же код здесь . Если у вас все еще есть проблемы, посмотрите весь свой код, может быть, где-то есть какой-то побочный эффект.