Уникальное предупреждение о ключе, но для значения кнопки, а не для стандартного дочернего вяза
У меня есть кнопка, значение которой изменяется в зависимости от состояния. Один из экземпляров объединяет строку и объект Fontawesome в массив. Я получаю предупреждение о ключе при рендеринге, однако я понятия не имею, как установить ключ на значение.
Ниже я включил фрагмент соответствующего кода, чтобы проиллюстрировать, что я делаю. В коде нет циклов, и именно здесь я видел ключевое требование ранее.
Код на самом деле работает нормально, переключая значение в поле кнопки, однако я получаю раздражающее предупреждение в консоли.
Ошибка "Предупреждение: каждый дочерний элемент в списке должен иметь уникальный ключевой реквизит."
const [ saveBtTxt, setSaveBtText ] = useState(["Save Filter"]);
const saveFilter = (e) => {
if (showFilterField) {
setSaveBtText(["Saved ",<FontAwesomeIcon icon = {["far","check"]} />])
}
setFilterField(true);
}
return (
<Button className = "outline" label = {saveBtTxt} clickHandler = {saveFilter} />
)
Не дубликат, строго говоря
Ответы 1
Попробуйте добавить ключ к объекту <FontAwesomeIcon ..., например:
const [ saveBtTxt, setSaveBtText ] = useState(["Save Filter"]);
const saveFilter = (e) => {
if (showFilterField) {
setSaveBtText(["Saved ",<FontAwesomeIcon key = "1-saved" icon = {["far","check"]} />])
}
setFilterField(true);
}
return (
<Button className = "outline" label = {saveBtTxt} clickHandler = {saveFilter} />
)
Спасибо, Дейл. Это сделало это. Как ни странно, у него возникла проблема с другим экземпляром из-за другого объекта FontAwesome, который находился где-то в другом месте документа, но не был родственным этому. Мое предположение заключалось в том, что ключи нужны только тогда, когда вы имеете дело с братьями и сестрами, и это кажется неверным.
Возможный дубликат Понимание уникальных ключей для дочерних элементов массива в React.js