NotFoundError: Не удалось выполнить «removeChild» на «узле» в React с Flickity - PullRequest
Новая
       81

NotFoundError: Не удалось выполнить «removeChild» на «узле» в React с Flickity

3 голосов
/ 05 апреля 2020

Я создаю приложение реагирования, и на моей HomePage у меня есть компонент «CategoriesList».

Когда я нахожусь на HomePage, «Список категорий» работает хорошо, но когда я перемещался на страницу ProductDetails с Reaction-router-dom, я обнаружил эту ошибку:

"NotFoundError: Не удалось выполнить« removeChild »на« Узле »: удаляемый узел не является дочерним по отношению к этому узлу . "

'CategoriesList' использует Flickty. Я пытался удалить Flickity, и ... Работает хорошо. Но мне нужно использовать Flickity.

Кто-нибудь может мне помочь?

Компонент 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>
    );
}

Компонент 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);
      }
}
...