React 对象作为 React 子错误无效
Posted
技术标签:
【中文标题】React 对象作为 React 子错误无效【英文标题】:React Objects are not valid as a React child error 【发布时间】:2018-11-12 13:53:00 【问题描述】:我试图找出在我的代码中导致错误“对象作为 React 子项无效”的原因。这是我目前所拥有的:
render()
let showAddons = [];
let addons = 0;
if (typeof this.props.photoPackage.addons !== 'undefined')
if (typeof this.props.photoPackage.addons.Night !== 'undefined'
&& this.props.photoPackage.addons.Night.isNight)
const price = this.props.photoPackage.addons.Night.price;
addons = addons + price;
showAddons.push(<li key=1>Night Photos $price</li>)
if (typeof this.props.photoPackage.addons.Drone !== 'undefined'
&& this.props.photoPackage.addons.Drone.isDrone)
const price = this.props.photoPackage.addons.Drone.price;
addons = addons + price;
showAddons.push(<li key=2>Drone Photos $price</li>);
return (
<div>
showAddons //This causes the error
</div>
)
showAddons 变量是导致问题的原因,但我不知道为什么。两个 if 语句中的 price const 解析为 99,我通过将它们记录到控制台来检查它们。我在另一个组件上做了非常相似的事情,它工作得很好:
render()
let currentMonth = moment(this.state.year + '-' + this.state.month + '-' + 0o1);
let times = [];
let date = moment(this.state.chosenDate);
console.log('Date ', date.format('DD'));
for (let i = 0; i < Object.keys(this.state.times).length; i++)
const day = moment(
date.format('YYYY-MM-DD')
+ ' ' + this.state.times[i],
'YYYY-MM-DD hh:mmA');
times.push(<li key=i onClick=(e) =>
this.handleAddDateTime(day.format('YYYY-MM-DD hh:mm A'))
className="acuity_times">day.format('h:mm A') (day.format ('h:mm A') === '6:00 PM' || day.format ('h:mm A') === '8:00 PM') ? '(+$99)' : ''</li>)
return (
<div>
times //This works without errors
</div>
)
任何解决此问题的帮助将不胜感激。
更新:
我有 console.log() 工作和不工作的数组,我拍了一张控制台的照片,显示两个实例中的第一个对象。我不知道它是否会有所帮助,但它可能会提供更多的见解:
这是从 times 数组返回的第一个对象,它是按预期工作且没有错误的对象。
这是 showAddons 数组中返回的第一个对象,即产生错误的对象。如您所见,它们都是对象,但只有 showAddons 有问题,而 times 数组按预期工作。
【问题讨论】:
首先,您的代码格式非常糟糕,很难阅读您的代码。在解决问题所在之后考虑重构。稍后您将难以理解代码中发生的事情。其次,在返回之前尝试 console.logshowAddons
并使用输出编辑您的问题
@lomboboo 感谢您的建议。我在这里格式化它的方式不是它在实际代码中的格式化方式。它更像是一种严格的复制粘贴,但当我这样做时,它并不总是保持相同的格式。
我说的不仅是格式问题,而且您的实际代码是不可读的。所有的计算数组人口并不真正属于render
方法。考虑类内的单独方法。例如,formatDate()
、getDay()
、populateAddons()
showAddons 中的某些东西是一个对象。 console.log
看看里面有什么。
Mark Swardstrom 我也试过了。在工作实例和非工作实例中,它们都作为对象数组返回,但似乎只有一个对象存在问题。在功能上,据我所知,工作和不工作的实例是相同的。
【参考方案1】:
对于正常的 React 语法,返回结果应该是 ()
而不是 ?
如果没有相同的错误,我无法让您的第二个渲染函数运行。我假设您的第二个函数是 getItems
渲染函数,因此它可以返回一个数组。
如果是这样,您应该将 showAddons
包装在 html 标记或 React 组件中。
return (
<div>
showAddons //This causes the error
</div>
)
如果您使用的是 react 16.2 或更高版本,则可以将 div
标签替换为 React.Fragment
。
【讨论】:
你是对的,我在返回时添加了错误,但在我的原始代码中,它被括号括起来。我现在要改了。以上是关于React 对象作为 React 子错误无效的主要内容,如果未能解决你的问题,请参考以下文章
错误:对象作为 React 子对象无效(找到:带键的对象..........)
React 错误:对象作为 React 子级无效,如果您打算渲染子级集合,请改用数组
错误:对象作为 React 子对象无效,但我的数据是对象数组?
对象作为 React 子对象无效。如果您打算渲染一组子项,请改用数组 - 错误 Solidity - React
尝试在反应中映射数据时出现错误。对象作为 React 子对象无效(找到:带有键 children 的对象),我该如何解决?