объект JavaScript не обновляется до добавленной стоимости

Question

У меня есть объект State().score, который должен обновляться с добавленной стоимостью при вызове в Handler().addToScore(). Дело в том, что он всегда остается на своем первоначальном значении, которое 0.

const DOM = () => {
  const dom = {}

  dom.score = document.getElementsByClassName('score')[0]

  return dom
}

const State = () => {
  const state = {}

  state.score = 0 // This remains 0, I want it to update when adding to it

  return state
}

const Handler = () => {
  const handler = {}

  handler.addToScore = function() { 
    State().score += 10

    console.log(State().score) // Equals to 0 on every click and never gets updated

    DOM().score.innerHTML = State().score
  }

  return handler
}

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

function statusChangeCallback(response) {
  if(response.status === 'connected') {
    console.log( 'Logged in and authenticated' )
    Handler().addToScore()
  } else {
    console.log('Not authenticated')
  }
}

Answer 1

Каждый раз, когда вы запускаете State(), он устанавливает, возвращает свежий объект с score, являющимся 0

. Вы должны будете сохранить результат инициализации вашего State().score, если хотите.быть спасенным.Или вы можете изменить способ генерации score, используя get ter и set ter

const State = () => {
  const state = {}

  state.score = 0 // This remains 0, I want it to update when adding to it

  return state
}

console.log(State().score); // State() is a function that ALWAYS returns { score: 0 }
let savedScore = State().score;
savedScore += 1;
console.log(savedScore);

Пример использования get / set (есть несколько способов сделать это:

https://jsfiddle.net/mswilson4040/1ds8mbqw/3/

class State {
    constructor() {
    this._score = 0;
  }
  get score() {
    return this._score;
  }
  set score(val) {
    this._score = val;
  }
}

const state = new State();
console.log(state.score);
state.score += 1;
console.log(state.score);

Еще один способ сделать это, конечно, это не сделать State функцией. Похоже, что вы на самом деле пытаетесь управлять счетом или состоянием, так что State будет функцией, которая в конечном итоге даст вам совершенно новое состояние(партитура) каждый раз не сработает.

Может сработать что-то простое, например, просто не иметь State функции:

const State = () => {
  const state = {}

  state.score = 0 // This remains 0, I want it to update when adding to it

  return state
}

Должно быть

const State = {
  score: 0
};