Блог

Вот головокружительный вопрос! У меня этот компонент моего приложения был завершен некоторое время. Я решил сделать небольшой, казалось бы, незначительный рефакторинг, который приводит к нарушению чего-то странного:

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

Идея заключалась в том, чтобы то, что отображается, менялось при изменении статуса.

Но когда вы нажимаете на ссылку, чтобы перейти к этому компоненту, пользовательский интерфейс мигает, показывая сначала «Закрытую» версию, и это некрасиво. Итак, я разделил их, другой компонент теперь находится только в своем собственном файле, и этот будет отображать только себя.

.. Поэтому я просто удалил это условие status==Open.

Итак, тот же компонент сверху теперь выглядит так

 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 amp;amp;
        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 amp;amp; 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 amp;amp; participants.map() все еще работает нормально. Для меня это не имеет смысла.

Ошибка, которую я получаю, такова Cannot read propery 'length' of undefined

Чтобы протестировать это, я запустил консоль.войдите в participants систему, и в консоли отобразятся две вещи:

 undefined
participants[]
  

Эта undefined вещь приводит к поломке моего компонента, но, по-видимому, раньше этого не было.
Я очистил свои данные, думая, что там что-то есть, но это все еще происходит (участники — это пустой массив прямо сейчас, поэтому он должен быть 0)

Я не вижу ничего странного в том, что вы получаете, возможно status === "Open" , это было защитное предложение, чтобы избежать undefined попадания в этот код, просто добавьте другое защитное предложение, на которое указывает ошибка participants amp;amp; participants.length === 1