Reactjs React对象作为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>
)}

render（）{
让showAddons=[]；
让addons=0；
if（typeof this.props.photoPackage.addons！=“未定义”）{
if（type of this.props.photoPackage.addons.Night！=“未定义”
&&这个.props.photoPackage.addons.Night.isNight）{
const price=this.props.photoPackage.addons.Night.price；
插件=插件+价格；
showAddons.push（
夜间照片${price}
）
}
if（type of this.props.photoPackage.addons.Drone！=“未定义”
&&这个。道具。摄影包。插件。无人机。isDrone）{
const price=this.props.photoPackage.addons.Drone.price；
插件=插件+价格；
showAddons.push（
无人机照片${price}
）；
}
返回(
{showAddons}//这会导致错误
)}

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>


)}

render（）{
设currentMonth=时刻（this.state.year+'-'+this.state.month+'-'+0o1）；
让时间=[]；
让日期=时刻（this.state.chosenDate）；
console.log（'Date'，Date.format（'DD'）；
for（设i=0；i{
this.handleaddatetime（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'）：'}）
}
返回(
{times}//此操作不会出错
)}

如果您能帮我解决这个问题，我们将不胜感激

更新：

我有console.log（）两个工作数组和非工作数组，我拍了一张控制台的照片，在这两个实例中都显示了第一个对象。我不知道这是否有帮助，但它可能会提供更多的见解：

这是从times数组返回的第一个对象，该对象按预期工作，没有错误

这是showAddons数组中返回的第一个对象，即产生错误的对象。正如您所看到的，它们都是对象，但只有showAddons有问题，而times数组按预期工作。

对于正常的React语法，返回结果应该是

（）

，而不是

{}

如果没有相同的错误，我无法运行您的第二个渲染函数。我假设您的第二个函数是

getItems

渲染函数，因此它可以返回数组

如果是这样，您应该将

{showAddons}

包装在html标记或React组件中

return (
  <div>
    {showAddons} //This causes the error
  </div>
)

返回(
{showAddons}//这会导致错误
)

---

你可以用<代码> >代码> Actudio.Type <代码> >如果你使用的是16.2或更高的反应。

首先，你的代码格式化非常糟糕，很难读取你的代码。在你解决问题的时候，考虑重构。稍后你会很难理解代码中的内容。其次，试着做弊。ole.log

showAddons

返回并用编辑您的问题之前output@lomboboo谢谢你的建议。我在这里设置格式的方式并不是它在实际代码中的格式。它更像是一个严格的复制粘贴，但在我这样做时，它并不总是保持相同的格式。我不仅仅是在讨论格式问题，而且也在讨论你的实际代码是不可读的。所有的计算数组人口并不真正属于<代码>渲染>代码>方法。在类内考虑单独的方法。例如，<代码>格式数据（）/代码>，<代码> GATEAL（）/<代码>，<代码> PufAuthAddioSon（）showAddons中的某些东西是一个对象。

console.log

以查看其中的内容。Mark Swardstrom我已经尝试过了。在工作和不工作实例中，它们都以对象数组的形式返回，但似乎只有一个对象有问题。就我所知，在功能上，工作和不工作插件tances是一样的。你是正确的，我在添加返回时犯了一个错误，但在我的原始代码中，它被括号包围。我现在要更改它。