Публикации по теме 'context-api'
Передача данных между одноуровневыми компонентами в React с использованием Context API и React Hooks
Я создам простое приложение для реагирования с двумя входами, где их значения будут полностью синхронизированы. В этой статье я объясню, как легко отправлять данные между одноуровневыми реагирующими компонентами, используя самые последние функции реагирования.
Настроить среду React
Чтобы запустить новое приложение в React, вам не нужно беспокоиться обо всех настройках и конфигурациях. Я буду использовать Create React App среду, которая довольно проста и хорошо документирована...
Использование контекстного API и хука useContext()
В React Context API — это функция, которая позволяет вам обмениваться данными между компонентами без необходимости передавать свойства вниз по дереву компонентов. Context API состоит из двух основных частей: функции createContext() и хука useContext() .
Вот как использовать Context API в React:
Создайте контекст: используйте функцию createContext() , чтобы создать новый контекст. Аргумент, переданный в createContext() , является значением по умолчанию для контекста.
import..
Тестирование компонентов React с использованием нового контекстного API
Тестирование компонентов React с использованием нового API контекста React
Когда я пишу это, React 16.3 только что приземлился вчера. Вместе с ним идет новый стабильный контекстный API. Его легко использовать, и есть много отличных статей, которые покажут вам, как это сделать. Это невероятно крутое дополнение к React. Это делает компоненты более декларативными, упрощает ваш код, не требуя, чтобы компоненты имели дополнительные свойства, просто чтобы передать их дочернему компоненту...
Вопросы по теме 'context-api'
[React-Context]: ошибка проверки формы не появляется в первый раз
Ошибка проверки в моей форме входа отображается только при втором нажатии кнопки отправки с неверными учетными данными. Я замечаю, что, хотя состояние обновляется, сообщение об ошибке не отображается в первый раз. Чтобы увидеть сообщение об ошибке...
301 просмотров
schedule
15.10.2021
предотвратить повторный рендеринг дочернего компонента ниже поставщика контекста с помощью памятки
Я использую поставщик контекста в React для обмена данными между несколькими компонентами. Однако, поскольку значение изменяется от одного из моих подкомпонентов, он повторно отображает все мои другие компоненты, что частично приводит к проблемам с...
563 просмотров
schedule
01.12.2021
Задержка использованияContext React JS
В моем приложении React, когда пользователь входит в систему, создается токен (JWT), после чего он сохраняется в LocalStorage.
Как только все будет сделано, я использую useContext, чтобы сохранить логин пользователя для разных маршрутов.
Я хочу...
149 просмотров
schedule
24.02.2022
React - проблемы с фильтрацией извлеченных данных из глобального контекста
У меня есть простое приложение, показывающее товары с ценами на них. Я создал глобальный контекст как свое глобальное состояние. Я пытаюсь создать компонент фильтра, в котором я могу фильтровать элементы, которые я получаю из контекста, - фильтруя...
153 просмотров
schedule
25.04.2022
Чем отличается React Context API от отдельного JS-файла для хранения пользовательских данных?
Я новичок в ReactJs. Насколько я понимаю, контекстный API React, используемый для обмена данными между компонентами, чтобы избежать многократной передачи данных с реквизитами во вложенных компонентах. Но я могу сделать это с помощью простого...
121 просмотров
schedule
25.05.2022
Gatsbyjs и localStorage: постоянное состояние
Я создаю баннер GDPR для своего сайта. Я хочу, чтобы этот баннер появлялся на каждой странице моего сайта, пока пользователь не нажмет кнопку принятия. На своем сайте Gatsby я использую Context API , чтобы узнать, принял ли пользователь условия, с...
194 просмотров
schedule
24.07.2022
Как использовать Context API для передачи состояния при использовании Router в React JS
У меня есть настройка файла Context API, которая имеет состояние и функцию, которая извлекает данные из API и устанавливает состояние, и я хочу передать состояние другим моим компонентам. В моем App.js я использую React-Router для указания маршрутов....
1601 просмотров
schedule
28.07.2023
отправка недоступна из useContext
у меня простой магазин
import React, { createContext, useReducer } from "react";
import Reducer from "./UserReducer";
const initialState = {
user: {},
error: null
};
const Store = ({ children }) => {
const...
72 просмотров
schedule
23.03.2023
Совместное реагирование на Redux и Context api
У меня есть вопрос, по которому я не могу найти подходящий ресурс, чтобы прояснить свое мнение по этому поводу. В основном сценарий заключается в том, что я использую хранилище Redux для извлечения некоторых данных, где эти данные будут...
843 просмотров
schedule
16.01.2023
Состояние меню гамбургера с React/Nextjs
Итак, у меня есть компонент Navbar.js и компонент Menu.js. У меня есть состояние showMenu в Context API. Каждый раз, когда щелкают гамбургер-меню панели навигации, это состояние контекста устанавливается в значение true или false. Затем в Menu.js...
197 просмотров
schedule
30.05.2023
Невозможно выполнить обновление состояния React на отключенном компоненте. (UseEffect) (Context API) (REACT.js)
Итак, я получаю это предупреждение: -
*Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup...
285 просмотров
schedule
19.02.2024
Как я могу получить доступ к своему состоянию контекстного API в файле React app.js
Привет, я управляю своим состоянием приложения реакции с помощью Context API, и я могу деструктурировать состояние и функции моего контекста во всех файлах, кроме моего файла app.js.
Здесь я создал многоразовый файл под названием createDataContext,...
22 просмотров
schedule
20.03.2024