yaodingyd / react-flickity-component

A React.js component for using @desandro's Flickity
314 stars 51 forks source link

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. #101

Closed ouzy closed 4 years ago

ouzy commented 4 years ago

`render() { const flickityOptions = { initialIndex: 0, autoPlay: 10000, prevNextButtons: false, adaptiveHeight: false, wrapAround: true }

    return (
        <div className={this.props.cssClasses}>
            {
                this.props.blockData.messages.length ? 
                    <Flickity
                        className={'slide-wrap'} // default ''
                        elementType={'div'} // default 'div'
                        options={flickityOptions} // takes flickity options {}
                        disableImagesLoaded={false} // default false
                        reloadOnUpdate={true} // default false
                        static // default false
                        >

                        {this.props.blockData.messages.map((message, key) =>
                            <div className={"community-message__row " + message.type} key={key}>
                                {message.title ? <p className="community-message__row__title">{message.title}</p> : ""}
                                <img alt={message.title} src={message.image}/>
                                {message.message ? <p className="community-message__row__message">{message.message}</p> : ""}
                            </div>
                        )}
                    </Flickity>
                    :
                    ""
            }
        </div>
    );
}`

I have an app that pulls from an api at an interval, and every once in a while on an app data update, I get this error. I looked at https://github.com/theolampert/react-flickity-component/issues/41 but didn't find any answers there. I'm confused as to how to implement "Run reloadCells and resize on componentDidUpdate" if that is the solution.

TheKingDave commented 4 years ago

Since you are updating your content you should remove the static prop. static prevents you from changing the content in the future but improves server side rendering.

You could also add the reloadOnUpdate prop but this will re render Flickity completely. This may lead to flickering.