React对象作为React子错误无效

Question

I am trying to figure out what could be causing the error "Objects are not valid as a React child" in my code. This is what I have so far:

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>
)}

The showAddons variable is what is causing the issue, but I can't figure out why. The price const in both if statements resolves to 99, I checked them by logging them to the console. I did something very similar on another component and it works just fine:

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>


)}

Any help figuring this out would be appreciated.

Update:

I have console.log() both the working and not working arrays and I took a photo of the console displaying the first object in both instances. I don't know if it will help, but it might give some more insight:

This is the first object returned from the times array, which is the one that works as expected with no errors.

This is the first object returned in the showAddons array, the one that produces the error. As you can see, they are both objects, but only showAddons is having the issue, whereas the times array works as expected.

Answer 1

Should it be () around return result instead of {} for normal React syntax?

I cannot get your second render function running without the same error. I'm assuming your second function is a getItems render function so it can return an array.

If so, you should wrap your {showAddons} inside a html tag or a React component.

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

You can replace div tag with React.Fragment if you're using react 16.2 or later.