Реагируйте на компонент setState (), а родительский компонент тем временем перерисовывает себя - PullRequest
Новая
       6

Реагируйте на компонент setState (), а родительский компонент тем временем перерисовывает себя

0 голосов
/ 04 мая 2020

Я создал страницу React следующим образом: page.
Переключатель привязан к функции обратного вызова из родительского componentA, а componentA получает эту функцию со страницы верхнего уровня. Обратный вызов обновляет состояние страницы верхнего уровня. Итак, когда переключатель щелкнул, страница верхнего уровня повторно отобразит компонент A.

Переключатель, который я использую, является компонентом из библиотеки React-Switch: https://www.npmjs.com/package/react-switch

Иногда, когда я нажимаю переключатель, появляется предупреждение: 

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ReactSwitch component.

Вот фрагмент кода.
На странице верхнего уровня: 

    // In the top-level page, there is a state to decide whether or not to apply some data filter
    onSwitcherClicked(event) {
        this.setState({
            applyFilter: event,
    });

    render() {
        const filter = this.state.applyFilter ? '{paths:["/some_filters"],}' : '{paths:["/none"],}';
        return (
            <div>
                <ComponentA
                    filter = {filter}
                    applyFilter = {this.applyFilter}
                    callBack = {this.onSwitcherClicked}
                    />
            </div>
        );

В Компоненте A 

    // Component A
    componentWillMount() {
        // Send some API request according to this.props.filter and load the data
        // So every time the switcher clicked, the page will update the filter and pass some new props to componentA,
        // then ComponentA will remount it self
    }

    render() {
        return (
            <div>
                <DataViewer>
                    {/*A component to display the data*/}
                </DataViewer>
                <Switch onChange={this.props.callBack}
                        checked={this.props.applyFilter}/>
            </div>
        )
    }

Вот сообщение об ошибке «

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ReactSwitch component. 

printWarning warning.js:33
    warning warning.js:57
    React 3
        getInternalInstanceReadyForUpdate
        enqueueSetState
        setState
    $onDragStop react-switch.dev.js:252
    $onMouseUp react-switch.dev.js:277

Я также скопировал код в response-switch.dev. js: 252 и response-switch.dev . js: 277: 

// react-switch.dev.js:252
252 this.setState({
253       $isDragging: false,
254       $hasOutline: false
255     });
256     this.$lastDragAt = Date.now();
// switch.dev.js:277
276 ReactSwitch.prototype.$onMouseUp = function $onMouseUp(event) {
277     this.$onDragStop(event);
278     window.removeEventListener("mousemove", this.$onMouseMove);
279    window.removeEventListener("mouseup", this.$onMouseUp);
280  };

Я думаю, это потому, что, когда я нажимаю переключатель, он сбрасывает свой собственный статус. Между тем, состояние родительского компонента также изменяется. Поэтому, когда переключатель вызывает setState (), сам был размонтирован. Я прав? Есть ли способ исправить это?

Спасибо!

1 Ответ

0 голосов
/ 04 мая 2020

Слишком долго для комментария, но структура вашего компонента должна выглядеть очень похожей на подобные вещи, и в этом случае вы не получите этого предупреждения. У меня такое чувство, что вы, возможно, пытаетесь дублировать источник истины для государства, вместо того, чтобы просто позволить ему течь вниз. 

const ParentComponent = () => {
    const [isClicked,setIsClicked] = useState(false);


    return (
        ...
        <Switcher selected={isClicked} onClick={() => setIsClicked(!isClicked)}/>
    )

}
...