React 对象作为 React 子错误无效答案

【问题标题】：React Objects are not valid as a React child errorReact 对象作为 React 子错误无效
【发布时间】：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.log showAddons 并使用输出编辑您的问题
@lomboboo 感谢您的建议。我在这里格式化它的方式不是它在实际代码中的格式化方式。它更像是一种严格的复制粘贴，但当我这样做时，它并不总是保持相同的格式。
我说的不仅是格式问题，而且您的实际代码是不可读的。所有的计算数组人口并不真正属于render 方法。考虑类内的单独方法。例如，formatDate()、getDay()、populateAddons()
showAddons 中的某些东西是一个对象。 console.log 看看里面有什么。
Mark Swardstrom 我也试过了。在工作实例和非工作实例中，它们都作为对象数组返回，但似乎只有一个对象存在问题。在功能上，据我所知，工作和不工作的实例是相同的。

标签： reactjs

【解决方案1】：

对于正常的 React 语法，返回结果应该是 () 而不是 {}？

如果没有相同的错误，我无法让您的第二个渲染函数运行。我假设您的第二个函数是 getItems 渲染函数，因此它可以返回一个数组。

如果是这样，您应该将 {showAddons} 包装在 html 标记或 React 组件中。

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

如果您使用的是 react 16.2 或更高版本，则可以将 div 标签替换为 React.Fragment。

【讨论】：

你是对的，我在返回时添加了错误，但在我的原始代码中，它被括号括起来。我现在要改了。