Strange Reactjs setState поведение

Question

У меня очень странная проблема с функцией setState от Reactjs. Кажется, я хочу, чтобы я структурировал фрагменты своего кода очень определенным образом, иначе это не сработает. Я понятия не имею, почему это вызывает проблему, поскольку обе структуры выглядят одинаково для меня, но ведут себя по-разному.

Я использую Browserify и Babelify для пересылки и gulp-uuglify, чтобы минимизировать мой код. Может быть, что одна или комбинация этих шагов здания вызывает проблему, но я не могу сказать, какой (и, следовательно, я также не знаю, если и где подать вопрос)

Вот соответствующий раздел моего код:

export default class VideoAppScreen extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      playing: 0, 
      playlist: [] 
     }; 
    } 

    addVideo(video) { 
     this.setState((previousState) => { 
      return {playlist: previousState.playlist.push(video)}; 
     }); 
    } 

    onEnd(event) { 
     console.log("onEnd", event, this.state); 
     this.setState((previousState) => { 
      return {playing: previousState.playing + 1}; 
     }); 
    } 

    render() { 
     // stuff 
    } 
} 

Как вы можете видеть SetState блоки отформатированный как это:

this.setState((previousState) => { 
    return {item: value}; 
}); 

Как это метод addVideo вызывает ошибку: Uncaught TypeError: t.playlist.push is not a function.

Если я изменяю блоки, чтобы быть похожим на это:

this.setState((previousState) => {item: value}); 

addVideo метод работает, но метод OnEnd перестает работать (не вызывая ошибку, она просто не обновляет состояние)

Я не могу понять, почему они не работают одинаково ... Для форматирования я бы хотел, чтобы оба они были одинакового стиля, но кажется, что они работают только при форматировании в любом стиле.

Answer 1

Так как он поворачивается, наш Array.prototype.push() ведет себя иначе, чем я ожидал, он возвращает длину массива с добавленным к нему новым элементом see mdn documentation.

Я был в основном сбросить мой список воспроизведения из [] в 1 и, конечно, числа не имеют функции толчок ...

Я не могу сказать, почему другой стиль форматирования сделал функцию, как и ожидалось ... The код, похожий на babelified, кажется, что он не должен работать (и не работал, когда я изменил другую функцию, чтобы выглядеть одинаково)

Answer 2

Я предполагаю, что previousState - это undefined, и что ваша проблема не вызвана расстоянием.

Как указано в react's component lifecycle doc, предыдущее состояние доступно только в определенных функциях:

• shouldComponentUpdate(nextProps, nextState),
• componentWillUpdate(nextProps, nextState) и
• componentDidUpdate(prevProps, prevState)

Так что, если вы звоните ваши функции в других раз, previousState будет неопределенным.