Javascript 谁能给我看看什么'；我的Redux州出了什么问题？

编辑

状态未在其中呈现的组件称为TournamentShow，它调用状态以及我需要用于Show页面的任何函数

嵌套在其中的是一个条件，根据

Tournament.Status==“打开”

Tornament.Status==“已关闭”

，以及

contraction.Status==“完成”

比赛节目：

大部分都有效。
我确信我搞砸了的是

锦标赛\状态\更新

和

洗牌\参与者

，尽管状态更新按预期工作

这是一个锦标赛应用程序，其显示页面根据ShowTornament.status呈现3个不同的组件

...

    if(loading) {
        return <Spinner color="light" /> 
    } else {
        if(this.props.tournament.showTournament.status === "Complete") {
            return (
                <Results />
            );
        } else if(this.props.tournament.showTournament.status === "Closed") {
            return (
                <div>
                    <HostUI
                        tournament={this.props.tournament.showTournament}
                    />
                    <StartBracket
                        tournament={this.props.tournament.showTournament}
                    />
                </div>
            );
        } else {
            return (
                <SignUpPage
                    tournament={this.props.tournament.showTournament}
                    auth={this.props.auth}
                    onSignUp={this.onSignUp}
                    onStartTournament={this.onStartTournament}
                />
            );
        }
    };

。。。
如果（装载）{
返回
}否则{
如果（this.props.tournament.showTournament.status==“完成”）{
返回(
);
}else if（this.props.tournament.showconturnament.status==“关闭”）{
返回(
);
}否则{
返回(
);
}
};

组件按钮：

• 随机化

  锦标赛。参与者

  并将其发送到

  锦标赛。括号。玩家

• 设置锦标赛。状态==“已关闭”

更新页面并正确呈现

状态：“已关闭”

页面

问题是，它只显示我在状态中已经加载的内容。（来自

SHOW\u锦标赛的资料

）

---

我将随机用户列表发送到的

方括号.players

数组在我刷新页面之前不会显示。

您需要复制正在更新的每个级别的状态。另外，

…state.showTornament.bracket.players.push（action.payload）

将简单地尝试在

push的返回值中展开，该值就是数组的新长度。这不是你想要的

case TOURNAMENT_STATUS_UPDATE:
  return {
    ...state,
    showTournament: {
      ...state.showTournament,
      status: action.payload,
    },
  };

case SHUFFLE_PARTICIPANTS:
  return {
    ...state,
    showTournament: {
      ...state.showTournament,
      bracket: {
        ...state.showTournatment.bracket,
        players: [...state.showTournament.bracket.players, ...action.payload], // spread payload array
      },
    },
  }

Drew的解决方案有效，只是为了将一个数组传递到另一个数组，语法是

players:[…state.showTournament.bracket.players.…action.payload]

而不是
players:[…state.showTornament.bracket.players，action.payload]

早安
我在文件上读到了这一点，但它没有被理解。好吧，我刚试过。同样的事情。组件更新并显示下一页（根据状态），但我仍然需要刷新以获取播放器rendered@Cin88哪个组件的状态没有更新？您能否包括该组件代码以及它如何连接到您的redux商店？谢谢。更新帖子以回答您的问题question@Cin88您是否已验证您的操作是否击中了redux和减速器？您是否安装了redux devtools来验证状态是否已更新到您期望的状态？如果你实现了一个
componentdiddupdate
功能，你会在那里看到更新的道具吗？@Cin88太棒了！我也修改了我的答案。干杯
componentDidUpdate
只是一个在状态或道具更新时调用的生命周期函数，它是一个简单的地方，可以在组件重新呈现时删除控制台日志以查看任何内容。
import { 
    GET_TOURNAMENTS, 
    SHOW_TOURNAMENT, 
    ADD_TOURNAMENT,
    ADD_TOURNAMENT_FAIL,
    EDIT_TOURNAMENT,
    EDIT_TOURNAMENT_FAIL,
    DELETE_TOURNAMENT, 
    TOURNAMENTS_LOADING, 
    TOURNAMENT_LOADING,
    USER_JOINS_TOURNAMENT, 
    TOURNAMENT_SIGN_UP_FAIL,
    TOURNAMENT_STATUS_UPDATE,
    TOURNAMENT_STATUS_FAILED,
    SHUFFLE_PARTICIPANTS,
    SHUFFLE_FAILED
} from '../actions/types';


const initialState = {
    tournaments: [],
    showTournament: {},
    loading: false,
};

export default function(state = initialState, action) {
    switch(action.type) {
        case GET_TOURNAMENTS:
            return {
                ...state,
                tournaments: action.payload,
                loading: false
            };

        case SHOW_TOURNAMENT:
            return {
                ...state,
                showTournament: action.payload,
                loading: false
            };

        case ADD_TOURNAMENT:
            return {
                ...state,
                tournaments: [action.payload, ...state.tournaments]
            };

        case DELETE_TOURNAMENT:
            return {
                ...state,
                tournaments: state.tournaments.filter(tournament => tournament._id !== action.payload)
            };

        case TOURNAMENTS_LOADING:
        case TOURNAMENT_LOADING:
            return {
                ...state,
                loading: true
            };

        case USER_JOINS_TOURNAMENT:
            return {
                ...state,
                ...state.showTournament.participants.push(action.payload)
            };

        case TOURNAMENT_STATUS_UPDATE:      // Occurs with SHUFFLE_PARTICIPANTS, which doesn't work
            return {
                ...state,
                ...state.showTournament.status = action.payload
            };

        case SHUFFLE_PARTICIPANTS:          // Does not work
            return {
                ...state,
                ...state.showTournament.bracket.players.push(action.payload)
            }

        case EDIT_TOURNAMENT:
        case ADD_TOURNAMENT_FAIL:
        case EDIT_TOURNAMENT_FAIL:
        case TOURNAMENT_SIGN_UP_FAIL:
        case TOURNAMENT_STATUS_FAILED:
        case SHUFFLE_FAILED:
            return {
                ...state,
            }

        default:
            return state;
    };
};

...

    if(loading) {
        return <Spinner color="light" /> 
    } else {
        if(this.props.tournament.showTournament.status === "Complete") {
            return (
                <Results />
            );
        } else if(this.props.tournament.showTournament.status === "Closed") {
            return (
                <div>
                    <HostUI
                        tournament={this.props.tournament.showTournament}
                    />
                    <StartBracket
                        tournament={this.props.tournament.showTournament}
                    />
                </div>
            );
        } else {
            return (
                <SignUpPage
                    tournament={this.props.tournament.showTournament}
                    auth={this.props.auth}
                    onSignUp={this.onSignUp}
                    onStartTournament={this.onStartTournament}
                />
            );
        }
    };

case TOURNAMENT_STATUS_UPDATE:
  return {
    ...state,
    showTournament: {
      ...state.showTournament,
      status: action.payload,
    },
  };

case SHUFFLE_PARTICIPANTS:
  return {
    ...state,
    showTournament: {
      ...state.showTournament,
      bracket: {
        ...state.showTournatment.bracket,
        players: [...state.showTournament.bracket.players, ...action.payload], // spread payload array
      },
    },
  }