React native: «Нарушение инварианта: объекты недействительны в качестве дочернего элемента React»
Целый день гуглил и нашел похожие проблемы, но не нашел ответов, которые решают мою проблему. Кажется, что «timeLeft», указанный как «до» в обратном отсчете, является объектом, хотя журнал (typeof timeLeft) говорит, что это число (как и должно быть).
Я получаю сообщение об ошибке: Нарушение инварианта: Нарушение инварианта: Нарушение инварианта: Объекты недействительны в качестве дочернего элемента React (найдено: объект с ключами {_40, _65, _55, _72}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.
render() {
return (
<View style = {styles.container}>
<ScrollView>
<View>
{
this.state.auctions.map(async (auctionObject, index) => {
var timeLeft = await this.getTimeLeft(auctionObject.expiration);
console.info(JSON.stringify(timeLeft) + typeof timeLeft)
return <View style = {styles.auctionObject} key = {index + 'a'}>
<Text key = {index + 'b'} onPress = {() => this._renderObjectPage(auctionObject)}>
TITLE: {auctionObject.title} {"\n"}
HIGHEST BID: {auctionObject.highestBid} {"\n"}
NUMBER OF LIKES:{auctionObject.numberOfLikes}
</Text>
<CountDown key = {index + 'c'}
until = {timeLeft}
timetoShow = {('H', 'M', 'S')}
size = {12}
/>
</View>
}
)
}
</View>
</ScrollView>Спасибо
Отлично! Если я удаляю асинхронность, переменная timeLeft не разрешается и становится объектом с ключами {_40, _65, _55, _72})
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема в том, что ваша функция рендеринга выводит список объектов Promise (который не является допустимым кодом реакции):
this.state.auctions.map(async (auctionObject, index) => {
var timeLeft = await this.getTimeLeft(auctionObject.expiration);
Вопрос: Вы уверены, что операция getTimeLeft должна быть асинхронной? Если это так, то эту операцию нужно будет выполнить вне функции рендеринга (возможно, в componentDidMount или componentDidUpdate).
Если вы можете изменить getTimeLeft на синхронный, он будет работать:
this.state.auctions.map((auctionObject, index) => {
var timeLeft = this.getTimeLeft(auctionObject.expiration);
Спасибо, это имеет смысл! Может ли быть способ поставить «ожидание» перед, скажем, «возвратом» внутри сопоставления, чтобы убедиться, что промисы разрешены перед рендерингом?
nw — нет, абсолютно нет — функция рендеринга спроектирована так, чтобы быть синхронной, так как эту функцию можно вызывать в любое время и иногда много раз в секунду. Ваш компонент должен иметь другой механизм, с помощью которого он разрешает данные (как я предложил выше), а функция рендеринга просто выводит html-код на основе данных, сохраненных в состоянии.
Остерегайтесь чего-либо асинхронного внутри вашего рендера