Реагировать на состояние потребителя сброса контекста - PullRequest
Новая
       26

Реагировать на состояние потребителя сброса контекста

2 голосов
/ 19 марта 2020

Я пытаюсь использовать React Context API для передачи данных о состоянии от родительского компонента глубоко вложенному дочернему элементу.

Родительский компонент является компонентом класса, а дочерний - функцией.

Когда из дочернего я обновляю родительское состояние с помощью функции, переданной через Контекст, родительское состояние успешно обновляется, но затем локальное состояние дочернего элемента сбрасывается до начального значения.

Родитель: 

 export class ObjectLinking extends Component {
        constructor(props) {
            super(props);
            this.state = {
                setCurrentlyDisplayed: this.setCurrentlyDisplayed,
                currentlyDisplayed: []
            };
        }

        [...]

        render() {
            return (
                <ObjectLinkingContext.Provider value={this.state}>
{//Panel body will contain deep nested child that is connected to context}
                   <PanelBody />
                </ObjectLinkingContext.Provider>
            );
        }
    }

Child: 

  import ObjectLinkingContext from '../../context/ObjectLinkingContext';
    const AssetListFilters = ({ assets, filtersModel }) => {
        const [searchByNameVal, setSearchByNameVal] = useState([]);
        const panelContext = useContext(ObjectLinkingContext);

        useEffect(() => {
            filterBySearchNameVal();
        }, [searchByNameVal]);

        const filterBySearchNameVal = () => {
            if (searchByNameVal.length) {
                const { setCurrentlyDisplayed } = panelContext;
                const { value: searchedId } = searchByNameVal[0];
                const searchedAsset = assets.filter(asset => asset.assetId === searchedId) || [];
                setCurrentlyDisplayed(searchedAsset);
            }
        };

        return (
                        <Autocomplete
                            onChange={val => setSearchByNameVal(val)}
                        />

      );
    };

Найти здесь полный родительский элемент. js и VeryDeepChild. js компонент

...