子數組組件更新后子組件未更新

Question

在更新數組（在對象內部）時，通過向其添加對象，不會重新呈現子組件。 但是，父組件是。

我嘗試更新對象的非數組屬性，同時還更新了對象的數組屬性，然后子組件將更新。 例如：

不起作用：

obj.arr.push(user);

作品：

obj.arr.push(user);
obj.test = "wow";

我的問題與users道具有關，從Lobby組件傳遞給Users組件。 當用戶加入時，將觸發套接字事件lobby_player_joined ，從而修改users數組。

大廳組成部分（父級）：

...

const StyledTabs = styled(Tabs)`${TabsStyle};`;

class Lobby extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: 0,
    };
    this.props.setTitle('Lobby');
  }

  static get propTypes() {
    return {
      history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
      location: PropTypes.shape({ state: PropTypes.object }).isRequired,
      setTitle: PropTypes.func.isRequired,
      initializeSocket: PropTypes.func.isRequired,
      onceSocketMessage: PropTypes.func.isRequired,
      onSocketMessage: PropTypes.func.isRequired,
      sendSocketMessage: PropTypes.func.isRequired,
    };
  }

  async componentDidMount() {
    await this.props.initializeSocket((error) => {
      console.error(error);
    });

    await this.props.onSocketMessage('exception', (error) => {
      console.log(error);
    });

    await this.props.onceSocketMessage('lobby_joined', (lobby) => {
      this.setState({ lobby });
    });

    await this.props.sendSocketMessage('lobby_join', {
      id: this.props.location.state.id,
      password: this.props.location.state.password,
    });

    await this.props.onSocketMessage('lobby_player_joined', (user) => {
      const { lobby } = this.state;
      lobby.users.push(user);
      return this.setState({ lobby });
    });

    await this.props.onSocketMessage('lobby_player_left', (user) => {
      const { lobby } = this.state;
      const userIndex = lobby.users.findIndex(u => u.id === user.id);
      if (userIndex !== -1) {
        lobby.users.splice(userIndex, 1);
        this.setState({ lobby });
      }
    });

    await this.props.onSocketMessage('lobby_new_host', (host) => {
      const { lobby } = this.state;
      lobby.host = host;
      return this.setState({ lobby });
    });
  }

  handleTab = (event, value) => {
    console.log(this.state.lobby);
    this.setState({ tab: value });
  };

  handleSwipe = (value) => {
    this.setState({ tab: value });
  };

  render() {
    if (!this.state.lobby) {
      return (<div> Loading... </div>);
    }

    return (
      <Container>
        <AppBar position="static">
          <StyledTabs
            classes={{
              indicator: 'indicator-color',
            }}
            value={this.state.tab}
            onChange={this.handleTab}
            fullWidth
            centered
          >
            <Tab label="Users" />
            <Tab label="Info" />
          </StyledTabs>
        </AppBar>
        <SwipeableViews
          style={{ height: 'calc(100% - 48px)' }}
          containerStyle={{ height: '100%' }}
          index={this.state.tab}
          onChangeIndex={this.handleSwipe}
        >
          <TabContainer>
            <Users
              {...this.state.lobby}
            />
          </TabContainer>
          <TabContainer>
            <Info
              {...this.state.lobby}
            />
          </TabContainer>
        </SwipeableViews>
      </Container>
    );
  }
}

...

用戶組件（子組件）：

...

class Users extends Component {
  state = {
    isReady: false,
    usersReady: [],
  };

  async componentDidMount() {
    await this.props.onSocketMessage('lobby_user_ready', (data) => {
      this.setState(prevState => ({
        usersReady: [...prevState.usersReady, data.socketId],
      }));
    });

    await this.props.onSocketMessage('lobby_user_unready', (data) => {
      this.setState(prevState => ({
        usersReady: prevState.usersReady.filter(id => id !== data.socketId),
      }));
    });
  }

  componentWillUnmount() {
    this.props.offSocketMessage('lobby_user_ready');
    this.props.offSocketMessage('lobby_user_unready');
  }

  static get propTypes() {
    return {
      id: PropTypes.number.isRequired,
      users: PropTypes.arrayOf(PropTypes.object).isRequired,
      userCount: PropTypes.number.isRequired,
      host: PropTypes.shape({
        username: PropTypes.string.isRequired,
      }).isRequired,
      sendSocketMessage: PropTypes.func.isRequired,
      onSocketMessage: PropTypes.func.isRequired,
      offSocketMessage: PropTypes.func.isRequired,
    };
  }

  readyChange = () => {
    this.setState(prevState => ({ isReady: !prevState.isReady }), () => {
      if (this.state.isReady) {
        return this.props.sendSocketMessage('lobby_user_ready', { id: this.props.id });
      }
      return this.props.sendSocketMessage('lobby_user_unready', { id: this.props.id });
    });
  };

  renderStar = (user) => {
    const { host } = this.props;
    if (host.username === user.username) {
      return (<Icon>star</Icon>);
    }
    return null;
  }

  render() {
    return (
      <UserContainer>
        { this.props.users.length }
        <CardsContainer>
          {this.props.users.map(user => (
            <UserBlock
              className={this.state.usersReady.includes(user.socketId) ? 'flipped' : ''}
              key={user.socketId}
            >
              <BlockContent className="face front">
                { this.renderStar(user) }
                <div>{user.username}</div>
                <Icon className="icon">
                  close
                </Icon>
              </BlockContent>
              <BlockContent className="face back">
                <Icon>
                  star
                </Icon>
                <div>{user.username}</div>
                <Icon className="icon">
                  check
                </Icon>
              </BlockContent>
            </UserBlock>
          ))}
        </CardsContainer>
        <InfoContainer>
          <p>Players</p>
          <p>
            {this.props.users.length}
            {' / '}
            {this.props.userCount}
          </p>
          <p>Ready</p>
          <p>
            {this.state.usersReady.length}
            {' / '}
            {this.props.userCount}
          </p>
        </InfoContainer>
        <StyledButton
          variant={this.state.isReady ? 'outlined' : 'contained'}
          color="primary"
          onClick={this.readyChange}
        >
          { this.state.isReady ? 'Unready' : 'ready'}
        </StyledButton>
      </UserContainer>
    );
  }
}

...

在修改數組道具時，有人可以幫助我使Users組件更新/重新渲染嗎？

Answer 1

不要改變狀態。 使用這樣的東西

await this.props.onSocketMessage('lobby_player_joined', (user) => {
  const { lobby } = this.state;
  return this.setState({ lobby : {...lobby, users: lobby.users.concat(user)} });
});

編輯：修復丟失的括號

Answer 2

這是因為React會比較道具的相等性，以確定是否重新渲染組件。 代替

obj.arr.push(user);

嘗試

const newObj = {...obj, arr: obj.arr.concat(user)};

這將創建一個新的對象。

一種替代方法是使用Immutable.js