Mobx наблюдать свойство объекта в массиве наблюдения - PullRequest
Новая
       100

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

0 голосов
/ 29 мая 2020

У меня 2 класса: 

class Account {
  games: Game[];
}

class Game {
  id: number;
  active: boolean;
}

И наблюдаемый массив учетных записей.

Мне нужно изменить свойство active в игре с помощью флажка. Но когда я изменяю active, мой компонент реакции не обновляется. 

interface GameListProps {
  games: Game[];
}

@observer
class GameList extends Component<GameListProps> {
  render() {
    return (
      <div>
        {Array.map((game) => (
          <div>
            <input
              type="checkbox"
              checked={game.active}
              onChange={(event) => {
                game.active = event.target.checked;
              }}
            />
          </div>
        ))}
      </div>
    );
  }
}

Как я могу изменить active с обновлением компонента реакции?

Могу ли я создать массив проверенных игр, но использовать active на checked? 

@observer
class GameList extends Component<GameListProps> {
  @ovservable checkedGames: number[];

  handleCheck(gameId: number, checked: boolean) {
    this.props.games.find((game) => game.id === gameId).active = cheched;
    if (checked) {
      this.checkedGames.push(gameId);
    } else {
      let findIndex = this.checkedGames.indexOf(gameId);
      if (findIndex !== -1) {
        this.checkedGames.splice(this.checkedGames.indexOf(gameId), 1);
      }
    }
  }

  render() {
    return (
      <div>
        {Array.map((game) => (
          <div>
            <input
              type="checkbox"
              checked={game.active}
              onChange={(event) => {
                this.handleCheck(game.id, event.target.checked);
              }}
            />
          </div>
        ))}
      </div>
    );
  }
}

Я думаю, что это нехорошо, потому что мы меняем props. Но нам нужно свойство игры active для состояния инициализации чекбокса.

1 Ответ

1 голос
/ 30 мая 2020

Вы должны отметить свойство active в классе Game как наблюдаемое. 

class Game {
  id: number;
  @observable active: boolean;
  // --^
}
...