Блог

Главная - Вопросы по программированию - Реагировать – как условно вернуть одно значение (или запасной вариант)

Реагировать – как условно вернуть одно значение (или запасной вариант)

#reactjs

Вопрос:

У меня есть этот код (отредактирован для краткости):

 export default function Navigation({ page }) {
  return (
    <ul>
      {page.category.map((category) => (
        <>
          {(category.slug === exampleSlug)
            ? <li key={category._id}>{category.title}</li>
            : <li key={category._id}>All</li>
          }
        </>
      ))}
    </ul>
  )
}

Он правильно возвращает либо название категории, либо «Все» для каждой категории, которая есть на странице. Вместо этого мне нужно, чтобы он возвращал только одно значение (в отличие от одного для каждой категории). В обычном тексте, если какая-либо одна категория соответствует , отобразите заголовок категории, в противном случае отобразите «Все». exampleSlug

Я пытался решить эту проблему, используя for цикл вместо map метода, например, если выполняется условие, возвращайте значение, в противном случае возвращайтесь к другому значению, но оказывается , что в этом случае я не смог бы использовать return только Array.push (пожалуйста, поправьте меня, если я ошибаюсь).

Спасибо

Ответ №1:

Если вы когда-либо захотите отобразить только одну <li> из них , либо для первой подходящей категории, либо для какой-то резервной, просто найдите подходящую категорию и решите, существует ли она:

 export default function Navigation({page}) {
  // find a matching category, it will be undefined if none exits
  const category = page.category.find(category => category.slug === exampleSlug);

  return (
    <ul>
        {/* render, based on whether a category was found */}
        <li>{undefined === category ? 'All' : category.title}</li>
    </ul>
  );
}

Комментарии:

1. Да, возможно, дополнительная переменная состояния-это слишком много, но вы не учитываете _id (это необязательно, потому что результат-всего один li =))

2. Да, это действительно зависит от того, чего на самом деле хочет @ytrewq. Если результатом всегда должен быть один элемент, ключ не требуется. ^^

Ответ №2:

Вы можете создать функцию anyoneMatches , которая берет page.category, exampleSlug и использует find для поиска первой соответствующей exampleSlug категории .

Но у вас есть проблема: в случае совпадения, что category.title вы хотите показать? Первое, что совпадает? Если да, вам нужно создать переменную состояния с именем category и установить ее, когда вы найдете совпадение. Что-то вроде:

 const [category, setCategory] = useState({"_id": 0}); //<-- first match category

export default function Navigation({ page }) {
  return (
    <ul>
          {anyoneMatches(page.category, exampleSlug)
            ? <li key={category._id}>{category.title}</li>
            : <li key={category._id}>All</li>
          }
    </ul>
  )
}

const anyoneMatches = (categories, exampleSlug) => {
  let cat = categories.find(cat => cat.slug === exampleSlug); //<-- find first category that matches
  if (cat) setCategory(cat); //<-- if exists, call setCategory
  else setCategory({"_id": 0}); // else set category to default category (we need _id for li's key)
  return cat !== undefined; //<-- return a bool to condition html
}
Метки: