NotFoundError : Impossible d'exécuter 'removeChild' sur 'Node' dans React avec Flickity.

Question

Je suis en train de construire une application react, et sur ma page d'accueil, j'ai le composant 'CategoriesList'.

Lorsque je suis sur la page d'accueil, la liste des catégories fonctionne bien, mais lorsque je navigue vers la page ProductDetails avec react-router-dom, je trouve cette erreur :

"NotFoundError : Impossible d'exécuter 'removeChild' sur 'Node' : Le nœud à supprimer n'est pas un enfant de ce nœud."

CategoriesList" utilise Flickty. J'ai essayé d'enlever Flickty, et... Ca marche bien. Mais j'ai besoin d'utiliser Flickity.

Quelqu'un peut-il m'aider ?

Composant CategoryList :

const CategoryList = ({list, popupOpen, refreshProductList}) => {

    return (
        <Container>
            <Slider
                options={{
                    cellAlign: 'center',
                    draggable: true,
                    groupCells: true,
                    contain: false,
                    pageDots: false,
                  }}

                  style={ popupOpen ? ({opacity: 0.05})  : null}
            >
                {list.map((category, index) => ( 
                        <Category key={index}>{category}</Category>
                ))}

            </Slider>
        </Container>
    );
}

Composant Flickty Slider :

import Flickity from 'flickity';
import 'flickity/dist/flickity.min.css';

export default class Slider extends Component {
    constructor(props) {
        super(props);

        this.state = {
          flickityReady: false,
        };

        this.refreshFlickity = this.refreshFlickity.bind(this);
      }

      componentDidMount() {
        this.flickity = new Flickity(this.flickityNode, this.props.options || {});

        this.setState({
          flickityReady: true,
        });
      }

      refreshFlickity() {
        this.flickity.reloadCells();
        this.flickity.resize();
        this.flickity.updateDraggable();
      }

      componentWillUnmount() {
        this.flickity.destroy();
      }

      componentDidUpdate(prevProps, prevState) {
        const flickityDidBecomeActive = !prevState.flickityReady && this.state.flickityReady;
        const childrenDidChange = prevProps.children.length !== this.props.children.length;

        if (flickityDidBecomeActive || childrenDidChange) {
          this.refreshFlickity();
        }
      }

      renderPortal() {
        if (!this.flickityNode) {
          return null;
        }

        const mountNode = this.flickityNode.querySelector('.flickity-slider');

        if (mountNode) {
          return ReactDOM.createPortal(this.props.children, mountNode);
        }
      }

      render() {
        return [
          <div style={this.props.style} className={'test'} key="flickityBase" ref={node => (this.flickityNode = node)} />,
          this.renderPortal(),
        ].filter(Boolean);
      }
}

Answer 1

Si vous voulez utiliser Flickity avec React au lieu de créer votre propre composant, je vous recommande vivement d'utiliser react-flickity-component . Il est également facile à utiliser :

Conseil : si vous utilisez wrapAround option dans Flickity set disableImagesLoaded accessoire ture (la valeur par défaut est false ).

import Flickity from 'react-flickity-component'

const flickityOptions = {
    autoPlay: 4000,
    wrapAround: true
}

function Carousel() {
  return (
    <Flickity
      disableImagesLoaded
      options={flickityOptions} // Takes flickity options {}
    >
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
    </Flickity>
  )
}