Объекты недействительны в качестве дочернего элемента React (снова)
Я знаю, что есть куча одних и тех же вопросов, но я действительно не понимаю, как подойти к этому иначе, чем это. Мне действительно нужно, чтобы массив объектов находился внутри карты, я сделал массив для его отображения, но мне нужно найти другую информацию для отображения, поэтому я нашел массив объектов внутри карты. Как еще я могу сделать это, кроме как с объектами?!?
У меня есть массив:
itemInfoObjTemp = ["lst_price", "qty_available", "qty_availible_diff"]
и у меня есть массив объектов:
itemInfoObjTemp2 =
Array [
Object {
"field_description": "Javna cijena",
"id": 2089,
"name": "lst_price",
},
Object {
"field_description": "Fizička zaliha",
"id": 3774,
"name": "qty_available",
},
Object {
"field_description": "Reserved Qty",
"id": 10970,
"name": "qty_availible_diff",
},
]
и я пытаюсь показать field_description как метку, но получаю:
Objects are not valid as a React child (found: object with keys {id, field_description, name}). If you meant to render a collection of children, use an array instead.
{itemInfoObjTemp.map((item, index) => (
<Text key = {index}>
<Text style = {{ fontWeight: 'bold' }}>
{itemInfoObjTemp2.find(item2 =>
item2.name === item
? item2.field_description
: item
)}
:
</Text>{' '}
{itemInfoObj[item].toString()}
</Text>
))}
вся эта информация является динамической из API, включая свойства объекта, поэтому жесткое кодирование невозможно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ознакомьтесь с документами find()здесь.
Они заявляют, что он «возвращает первый элемент в предоставленном массиве, который удовлетворяет предоставленной функции тестирования». Это означает, что когда вы вызываете find(), вы получаете обратно объект.
Вместо этого попробуйте что-то вроде:
<Text style = {{ fontWeight: 'bold' }}>
{itemInfoObjTemp2.find(item2 => item2.name === item)?.field_description}
</Text>
Мне стыдно... Мне просто нужно было: itemInfoObjTemp2.find( item2 => item2.name === item).field_description это один из тех дней...
Совсем не стыдно. Мы все иногда забываем, как работает JavaScript :) Я бы предложил добавить необязательную цепочку для возвращаемого объекта. В вашем исходном коде казалось, что вы не уверены, что всегда будет возвращаемый объект. Если объект не возвращен, вы получите сообщение об ошибке при попытке доступа к .field_description на undefined. Необязательная цепочка исправит эту ошибку.
Итак, я решил это с индексом:
{itemInfoObjTemp.map((item, index) => (
<Text key = {index}>
<Text style = {{ fontWeight: 'bold' }}>
{itemInfoObjTemp2[index].field_description}:
</Text>{' '}
{itemInfoObj[item].toString()}
</Text>
))}
Но это смешно. Это будет работать, только если массивы имеют одинаковую длину и в правильном порядке. В моем случае они по счастливой случайности всегда будут, но у меня действительно должны быть другие более безопасные варианты...
Вам не нужно напрямую обращаться к индексу. Ваш код был почти правильным, просто использовал неправильную функцию массива.
Как это смешно? Исходный код не использовал find правильно, и вы обращаетесь непосредственно к массиву объектов. Также неясно, работает ли это на самом деле так, как задумано — index является последовательным, если массив объектов упорядочен иначе, чем массив строк, кажется, что это будет нарушено.
@DaveNewton Они не упорядочены по-разному. Я ошибся при создании вопроса, сделал его вручную, а не скопировал... Я сейчас обратно в свою нору поползу...
(Если такое же заказано, то зачем вообще find?) Я на две дырки больше, если нужно что-то еще ;) Надежнее в дырках.
@DaveNewton На всякий случай, если их не будет, как я уже сказал, это все динамические данные API, единственное, что можно сказать наверняка, так это то, что информация будет в обоих. Так что find лучше, чем index. Спасибо за помощь!
В таком примере, как:
someArray.find(someFn),someFn— это функция, которая должна возвращать логическое значение для каждого элемента массива someArray..findвернет элементsomeArray, который первым соответствует критериям, установленным функциейsomeFn. Он возвращает фактический элемент как есть. Итак, если элемент является объектом, то.findвозвращает объект.