Усі компоненти React можуть мати a стан пов'язані з ними. Стан компонента може змінюватися або через відповідь на дію, виконану користувачем, або через подію, викликану системою. Щоразу, коли стан змінюється, React повторно відтворює компонент у браузері. Перш ніж оновлювати значення стану, нам потрібно створити початкові налаштування стану. Коли ми закінчимо з цим, ми використовуємо метод setState(). щоб змінити об'єкт стану. Він гарантує, що компонент було оновлено, і вимагає повторного відтворення компонента.
Зміст
- React JS setState
- Кроки для створення програми React:
- Оновлення кількох атрибутів
- Оновлення значень стану за допомогою реквізитів.
- Оновлення стану з використанням попереднього значення.
React JS setState
setState є асинхронним викликом, що означає, що якщо викликається синхронний виклик, він може не оновлюватися в потрібний час, як-от знати поточне значення об’єкта після оновлення за допомогою setState, він може не видавати поточне оновлене значення на консолі. Щоб отримати деяку синхронну поведінку, потрібно передати функцію замість об’єкта в setState.
Синтаксис:
Ми можемо використовувати setState(), щоб змінити стан компонента безпосередньо, а також за допомогою функції зі стрілкою.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))> Кроки для створення програми React:
Крок 1: Створіть додаток React за допомогою такої команди:
латексні списки
npx create-react-app foldername>
Крок 2: Після створення папки проекту, тобто назви папки, перейдіть до неї за допомогою такої команди:
cd foldername>
Структура проекту:
Підхід 1: Оновлення окремого атрибута
Ми встановлюємо значення початкового стану всередині функція конструктора і створити іншу функцію updateState() для оновлення держ. Тепер, коли ми натискаємо кнопку, остання запускається як подія onClick що змінює значення стану. Ми виконуємо метод setState() у нашому функція updateState(). написавши:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Як бачите, ми передаємо об’єкт у setState(). Цей об’єкт містить частину стану, яку ми хочемо оновити, яка в даному випадку є значенням привітання . React приймає це значення та об’єднує його з об’єктом, який його потребує. Це так само, як компонент кнопки запитує, що йому слід використовувати для оновлення значення greeting, і setState() відповідає відповіддю.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >greeting:> >'Click the button to receive greetings'>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState({> >greeting:>'GeeksForGeeks welcomes you !!'>,> >});> >}> >render() {> >return> (> >> >Greetings Portal> >>
>{>/* Set click handler */>}> > this.updateState}>Натисніть на мене! ); } } експорт програми за замовчуванням;> |
python генерує uuid
>
>
Крок запуску програми: Запустіть програму за допомогою наступної команди з кореневого каталогу проекту:
npm start>
Вихід: Тепер відкрийте браузер і перейдіть до http://localhost:3000/ , ви побачите такий результат:
Підхід 2: Оновлення кількох атрибутів
Об’єкт стану компонента може містити кілька атрибутів, і React дозволяє використовувати функцію setState() для оновлення лише підмножини цих атрибутів, а також використовувати кілька методів setState() для незалежного оновлення кожного значення атрибута.
Ми встановлюємо початковий стан, ініціалізувавши три різні атрибути, а потім створюємо функцію updateState() який оновлює своє значення кожного разу, коли його викликають. Знову ця функція запускається як подія onClick і ми одночасно отримуємо оновлені значення наших станів.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >test:>'Nil'>,> >questions:>'0'>,> >students:>'0'>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState({> >test:>'Programming Quiz'>,> >questions:>'10'>,> >students:>'30'>,> >});> >}> >render() {> >return> (> >> >Test Portal> >>
>>
>>
>{>/* Set click handler */>}> > this.updateState}>Натисніть на мене! ); } } експорт програми за замовчуванням;> |
>
>
Крок запуску програми: Запустіть програму за допомогою наступної команди з кореневого каталогу проекту:
npm start>
Вихід: Тепер відкрийте браузер і перейдіть до http://localhost:3000/ , ви побачите такий результат:
Підхід 3: Оновлення значень стану за допомогою реквізитів.
Ми створили масив рядків тестові теми як опори для нашого компонента. Функція listOfTopics створено для відображення всіх рядків як елементів списку в нашому стані теми . Функція updateState запускається та встановлює теми для елементів списку. Коли ми натискаємо кнопку, ми отримуємо оновлені значення стану. Цей метод добре відомий тим, що дуже легко обробляє складні дані та оновлює стан.
mylivecricket.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >static defaultProps = {> >testTopics: [> >'React JS'>,> >'Node JS'>,> >'Compound components'>,> >'Lifecycle Methods'>,> >'Event Handlers'>,> >'Router'>,> >'React Hooks'>,> >'Redux'>,> >'Context'>,> >],> >};> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >testName:>'React js Test'>,> >topics:>''>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >listOfTopics() {> >return> (> >>> >{>this>.props.testTopics.map((topic) =>(> >{topic}> >))}> >>>);> >}> >updateState() {> >// Changing state> >this>.setState({> >testName:>'Test topics are:'>,> >topics:>this>.listOfTopics(),> >});> >}> >render() {> >return> (> >> >Test Information> >>
>>
instanceof в java >{>/* Set click handler */>}> > this.updateState}>Натисніть на мене! ); } } експорт програми за замовчуванням;> |
>
>
Крок запуску програми: Запустіть програму за допомогою наступної команди з кореневого каталогу проекту:
npm start>
Вихід: Тепер відкрийте браузер і перейдіть до http://localhost:3000/ , ви побачите такий результат:
Підхід 4: Оновлення стану з використанням попереднього значення.
Створюємо початковий стан рахувати що має значення 0. Функція updateState() збільшує поточну вартість стану на 1 кожного разу, коли його викликається. Цього разу ми використовуємо метод setState() у стрілочній функції шляхом передачі prevState як параметр. Доступ до поточного значення стану здійснюється за допомогою prevState.stateName який збільшується на 1 кожного разу, коли ми натискаємо кнопку. Цей метод дійсно корисний, коли ми встановлюємо значення в стані таким чином, що воно залежить від попереднього значення. Наприклад , перемикання логічного значення (істина/хибність) або збільшення/зменшення числа.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >count: 0,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState((prevState) =>{> >return> { count: prevState.count + 1 };> >});> >}> >render() {> >return> (> >> >Click Counter> >>
>{>/* Set click handler */>}> > this.updateState}>Натисніть на мене! ); } } експорт програми за замовчуванням;> |
>
tojson java
>
Крок запуску програми: Запустіть програму за допомогою наступної команди з кореневого каталогу проекту:
npm start>
Вихід: Тепер відкрийте браузер і перейдіть до http://localhost:3000/ , ви побачите такий результат:
