yaodingyd / react-flickity-component

A React.js component for using @desandro's Flickity

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

ouzy opened this issue · comments

commented

`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 #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.

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.