Mobx观察数组中对象的观察属性

Question

我有2个班级：

class Account {
  games: Game[];
}

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

和可观察的帐户数组。

我需要使用复选框更改游戏中的属性active。但是，当我更改active时，我的react组件将不会更新。

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>
    );
  }
}

如何通过更新React组件来更改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作为复选框的初始化状态。

Answer 1

您应将active类的Game属性标记为可观察。

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