UI 上来自 redux 状态的 REACT 渲染数组

Question

这是一个令人头疼的问题！我的应用程序的这个组件已经完成了一段时间。我决定做一个小的、看似微不足道的重构，它导致了一些奇怪的问题：

return (
  <div>
    {
      status === "Open" ? ( // REMOVED THIS
        <div style={{ color: "lightgrey" }}>
          <h1 className="text-center">
            {title} <span style={{ fontSize: "0.5em" }}>by {hostedBy}</span>
          </h1>

          <h3>
            {" "}
            <TournamentDescription key={_id} title={title} />{" "}
          </h3>
          <br />

          <p
            className="text-center"
            style={{ color: "#56A8CBFF", fontSize: "2em" }}
          >
            ~ {status} for registration ~
          </p>

          <h4 className="text-left mt-5">
            {participants.length === 1
              ? `${participants.length} Registered Fighter`
              : `${participants.length} Registered Fighters`}
          </h4>

          <ul>
            {participants &&
              participants.map((participant) => (
                <li
                  key={participant._id}
                  className="text-left"
                  style={{ fontSize: "1.1em" }}
                >
                  {participant.username}
                </li>
              ))}
          </ul>

          {isAuthenticated ? (
            <div>
              <TournamentSignUp
                participants={participants}
                userId={user._id}
                onClick={() => this.onSignUp(_id, user)}
              />
            </div>
          ) : (
            <Button block disabled>
              Log in to sign up for this tournament
            </Button>
          )}
          {isAuthenticated && user.username === hostedBy ? (
            <div>
              <StartTournament
                participants={participants}
                onClick={() => this.onStartTournament(_id, participants)}
              />
            </div>
          ) : null}
        </div>
      ) : (
        <TournamentStartPage /> // REMOVED THIS
      )
    }
    <br />
    <Link to="/">Back to Tournaments main page</Link>
  </div>
);

这个想法是为了在状态更改后显示的内容发生更改。

但是当您单击 link 进入该组件时，UI 闪烁并首先显示“已关闭”版本，这很丑陋。所以我拆分了 em，另一个组件现在就在它自己的文件中，而这个只会渲染它自己。

..所以我刚刚删除了状态==打开条件。

所以上面的相同组件现在看起来像

return (
  <div style={{ color: "lightgrey" }}>
    <h1 className="text-center">
      {title} <span style={{ fontSize: "0.5em" }}>by {hostedBy}</span>
    </h1>
    <h3>
      {" "}
      <TournamentDescription key={_id} title={title} />{" "}
    </h3>
    <br />
    <p className="text-center" style={{ color: "#56A8CBFF", fontSize: "2em" }}>
      ~ {status} for registration ~
    </p>

    <h4 className="text-left mt-5">
      {
        participants.length === 1 // THIS BREAKS
          ? `${participants.length} Registered Fighter` // THIS BREAKS
          : `${participants.length} Registered Fighters` // THIS BREAKS
      }
    </h4>

    <ul>
      {participants &&
        participants.map((participant) => (
          <li
            key={participant._id}
            className="text-left"
            style={{ fontSize: "1.1em" }}
          >
            {" "}
            {participant.username}
          </li>
        ))}
    </ul>

    {isAuthenticated ? (
      <div>
        <TournamentSignUp
          participants={participants}
          userId={user._id}
          onClick={() => this.onSignUp(_id, user)}
        />
      </div>
    ) : (
      <Button block disabled>
        Log in to sign up for this tournament
      </Button>
    )}
    {isAuthenticated && user.username === hostedBy ? (
      <div>
        <StartTournament
          participants={participants}
          onClick={() => this.onStartTournament(_id, participants)}
        />
      </div>
    ) : null}
    <br />
    <Link to="/">Back to Tournaments main page</Link>
  </div>
);

虽然 participants && participants.map() 仍然可以正常工作，但还是会中断。对我来说毫无意义。

我得到的错误是 Cannot read propery 'length' of undefined

为了测试它，我在 participants 上运行 a console.log 并且它在控制台中显示了两件事：

undefined
participants[]

undefined 导致我的组件损坏，但之前显然不存在。
我清除了我的数据，以为里面有东西，但它仍在发生（参与者现在是一个空数组，所以它应该是 0）

Answer 1

我没有看到你得到的有什么奇怪的，也许 status === "Open" 是一个保护子句以避免 undefined 进入该代码，只需在错误指向的地方添加另一个保护子句在 participants && participants.length === 1

UI 上来自 redux 状态的 REACT 渲染数组

REACT rendering array from the redux state on the UI

javascript

user-interface

components

reactjs

mern