Реактивный дочерний компонент не обновляется после смены реквизита - PullRequest
Новая
       21

Реактивный дочерний компонент не обновляется после смены реквизита

0 голосов
/ 21 января 2019

У меня странная проблема с рендерингом некоторого дочернего компонента после смены реквизита. Я использую CreatableInput компонент из act-select . Если вы хотите посмотреть на него, вы можете найдите его здесь, а также исходный код ` Reaction-select Сама библиотека использует внутреннее состояние для манипулирования входными значениями, но в моем проекте мне нужно работать с избыточным хранилищем. В handleKeyDown я беру значения из внутреннего состояния и отправляю его в мое избыточное хранилище, после чего родительский компонент, который подключен к хранилищу, получает изменения, но ему не удалось обновить его дочерний компонент. Когда я пишу что-то в поле ввода и нажимаю ENTER или TAB , это фактически меняет хранилище, но не показывает значение сразу, оно отображается только после некоторого blur . Хорошо работает с внутренним состоянием, но не с внешним. 

import React from 'react';
import CreatableSelect from 'react-select/lib/Creatable';
import * as fp from 'lodash/fp';

const components = {
    DropdownIndicator: null,
};

const createOption = label => ({
    label,
    value: label,
});

export default class CreatableInputOnly extends React.Component {
    state = {
        inputValue: '',
        value: {
            include: [],
            exclude: [],
        },
    };

    handleChange = leftValues => {
        this.props.clearInputValues({values: leftValues, filterType: this.props.filterType});

        this.setState({
            value: {
                include: fp.cond([
                    [fp.isEqual('include'), fp.constant(leftValues)],
                    [fp.stubTrue, fp.constant([...this.state.value.include])],
                ])(this.props.filterType),
                exclude: fp.cond([
                    [fp.isEqual('exclude'), fp.constant(leftValues)],
                    [fp.stubTrue, fp.constant([...this.state.value.exclude])],
                ])(this.props.filterType),
            },
        });

    };
    handleInputChange = inputValue => {
        this.setState({inputValue});
    };
    handleKeyDown = event => {
        const {inputValue, value} = this.state;
        const addValueToStore = this.props.addValueToStore;
        const filterType = this.props.filterType;

        if (!inputValue) return;
        switch (event.key) {
        case 'Enter':
        case 'Tab':
            this.setState({
                inputValue: '',

            }, () => {
                addValueToStore({values: createOption(inputValue), filterType});
            });

            event.preventDefault();
        }
    };
    render() {
        // eslint-disable-next-line prefer-const
        let {inputValue} = this.state;
        const {isMulti, isClearable, menuIsOpen, className, classNamePrefix, filterType, inputValues} = this.props;
        const allValues = fp.cond([
            [fp.isEqual('include'), fp.constant(inputValues.includeUrls)],
            [fp.isEqual('exclude'), fp.constant(inputValues.excludeUrls)],
            [fp.stubTrue, fp.constant([])],
        ])(filterType);
        console.log(inputValues.includeUrls, '<<<<<<<<<>>>>>>>>>>>>>>>>');

        return (
            <CreatableSelect
                components={components}
                inputValue={inputValue}
                isClearable={isClearable}
                isMulti={isMulti}
                menuIsOpen={menuIsOpen}
                onChange={this.handleChange}
                onInputChange={this.handleInputChange}
                onKeyDown={this.handleKeyDown}
                placeholder=""
                value={allValues}
                className={className}
                classNamePrefix={classNamePrefix}
            />
        );
    }
}
...