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

Question

我有2个class:

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

如何通过更新 React 组件来更改 active？

我可以创建一系列 checed 游戏，但将 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

您应该在 Game class 上将 active 属性标记为可观察。

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

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

Mobx observe property of object in observe array

reactjs

mobx

mobx-react

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

Mobx observe property of object in observe array

reactjs

mobx

mobx-react

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