Предупреждение: каждый дочерний элемент в списке должен иметь уникальный ключевой реквизит. «Рендер-логин»

У меня есть эта проблема, и я не могу понять, что мне не хватает? По ошибке он говорит мне проверить рендеринг входа. Это рендер входа:

<Box>
      {login ? (
        <Profile email = {email} loggedOut = {callBack} />
      ) : signUp ? (
        <SignUp cb = {signUpSuccess} />
      ) : (
        [
          <Box>
            <Title>Employee entry</Title>
            <Pbox>
              <Labal>Email</Labal>
              <InputCap
                type = "email"
                name = "email"
                placeholder = "Your email address here..."
                value = {email}
                onChange = {(e) => setEmail(e.target.value)}
              />
            </Pbox>
            <Pbox>
              <Labal>Password</Labal>
              <InputCap
                type = "password"
                name = "password"
                placeholder = "Your password here...."
                value = {password}
                onChange = {(e) => setPassword(e.target.value)}
              />
            </Pbox>
            <Btn onClick = {loginUser}>Login</Btn>
            <br />
            {signUp ? <SignUp /> : <Btn onClick = {signUpUser}>SignUp</Btn>}
          </Box>
        ]
      )}
    </Box>

я работаю с реактивным хуком и стилизованным компонентом! Спасибо!

Нет необходимости отображать это как array. Уберите скобки [] или добавьте опору key к Box. Вот так <Box key='foo'>

Dupocas 15.12.2020 13:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
82
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам не нужен массив для группировки одного компонента <Box>...</Box>:

<Box>
  {login ? (
    <Profile email = {email} loggedOut = {callBack} />
  ) : signUp ? (
    <SignUp cb = {signUpSuccess} />
  ) : (
    <Box>...</Box>
  )}
</Box>

Но если вы все еще собираетесь рендерить внутри массива, вы должны назначить свойство key для каждого визуализируемого компонента, в данном случае только для компонента Box:

<Box>
  {login ? (
    <Profile email = {email} loggedOut = {callBack} />
  ) : signUp ? (
    <SignUp cb = {signUpSuccess} />
  ) : (
    [<Box key = "someKey">...</Box>]
  )}
</Box>

В качестве примечания: когда вы хотите сгруппировать компоненты (вместо использования массива [<Comp1/>,<Comp2/>,...], вы должны использовать React.Framgent.

Я думаю, что есть проблема с использованием квадратных скобок вокруг он распознан как массив, вы пытались добавить свойство ключа, и ошибка исчезла? или постарайтесь не использовать эти квадратные скобки [] вокруг поля.

Другие вопросы по теме