Question

我试图找出可能导致错误的原因＆＃34;对象无效作为React孩子＆＃34;在我的代码中。这就是我到目前为止所做的：

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数组按预期工作。

Answer 1

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

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

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

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

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

React对象无效作为React子级错误

1 个答案: