В настоящее время я изучаю концепцию хуков в React и пытаюсь понять приведенный ниже пример.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    

You clicked {count} times

); }

В приведенном выше примере увеличивается значение счетчика самого параметра функции-обработчика. Что, если я хочу изменить значение счетчика внутри функции обработчика событий

Рассмотрим пример ниже:

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}


Ответы (14)

Перехватчики реагирования - это новый способ (все еще разрабатываемый) для доступа к основным функциям реагирования, таким как состояние, без использования классов, в вашем примере, если вы хотите увеличить счетчик непосредственно в функции-обработчике, не указывая его непосредственно в опоре onClick, вы можете сделать что-то вроде:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

и onClick:


Let's quickly explain what is going on in this line:

const [count, setCounter] = useState(0);

useState (0) возвращает кортеж, в котором первый параметр count - текущее состояние счетчика, а setCounter - метод, который позволит нам обновить состояние счетчика. Мы можем использовать метод setCounter для обновления состояния count где угодно - в этом случае мы используем его внутри функции setCount, где мы можем делать больше ; идея с хуками состоит в том, что мы можем сохранить наш код более функциональным и избежать компонентов на основе классов, если они не желательны / не нужны.

Я написал полную статью о хуках с несколькими примерами (включая счетчики), например, this codepen, я использовал useState, useEffect, useContextи настраиваемые хуки. Я мог бы подробнее рассказать о том, как хуки работают с этим ответом, но документация очень хорошо объясняет state hook и другие хуки, надеюсь, это поможет.

обновление: Хуки больше не являются предложением, так как версия 16.8 теперь доступна для использования, на сайте React есть раздел, отвечает на некоторые из FAQ.

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

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

  return (
    

You clicked {count} times

// passing a callback to useState to update count
); }

Это рекомендуемый способ, если ваше новое состояние зависит от вычислений из старого состояния.

Спасибо loelsonk, я так и сделал

const [dataAction, setDataAction] = useState ({имя: '', описание: ''});

    const _handleChangeName = (данные) => {
        если (data.name)
            setDataAction (prevState => ({... prevState, name: data.name}));
        если (data.description)
            setDataAction (prevState => ({... prevState, description: data.description}));
    };
    
    ....возвращение (
    
           _handleChangeName ({name: event.target.value})} />
           _handleChangeName ({description: event.target.value})} />
    )

useState () - это ловушка React. Хуки позволяют использовать состояние и изменчивость внутри функциональных компонентов.

Хотя вы не можете использовать хуки внутри классов, вы можете обернуть свой компонент класса функцией один и использовать хуки из него. Это отличный инструмент для переноса компонентов из класса в форму функции. Вот полный пример:

В этом примере я буду использовать компонент счетчика. Это он:

class Hello extends React.Component {
  конструктор (реквизит) {
    супер (реквизит);
    this.state = {count: props.count};
  }
  
  inc () {
    this.setState (prev => ({count: prev.count + 1}));
  }
  
  оказывать() {
    return 
  }
}

ReactDOM.render (, document.getElementById ('root'))


Это простой компонент класса с состоянием подсчета, и обновление состояния выполняется методами. Это очень распространенный шаблон в компонентах класса. Во-первых, обернуть его функциональным компонентом с тем же именем, который делегирует все свои свойства обернутому компоненту. Также вам нужно отобразить завернутый компонент в возвращении функции. Вот он:

function Hello (props) {
  class Hello extends React.Component {
    конструктор (реквизит) {
      супер (реквизит);
      this.state = {count: props.count};
    }

    inc () {
      this.setState (prev => ({count: prev.count + 1}));
    }

    оказывать() {
      return 
    }
  }
  return <Привет {... props} />
}

ReactDOM.render (, document.getElementById ('root'))


Это точно такой же компонент, с таким же поведением, тем же именем и одинаковыми свойствами. Теперь давайте перейдем к состоянию подсчета к функциональному компоненту. Вот как это происходит:

function Hello (props) {
  const [количество, setCount] = React.useState (0);
  class Hello extends React.Component {
    конструктор (реквизит) {
      супер (реквизит);
      this.state = {count: props.count};
    }

    inc () {
      this.setState (prev => ({count: prev.count + 1}));
    }

    оказывать() {
      return 
    }
  }
  return <Привет {... props} />
}

ReactDOM.render (, document.getElementById ('root'))


Обратите внимание, что метод inc все еще существует, он никому не повредит, на самом деле это мертвый код. Это идея, просто продолжайте поднимать состояние. Когда вы закончите, вы можете удалить компонент класса:

function Hello (props) {
  const [количество, setCount] = React.useState (0);

  return ;
}

ReactDOM.render (, document.getElementById ('root'))



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

С уважением

React useState - это React Hook, который позволяет вам управлять состоянием в функциональных компонентах.

Например:

импортировать React, {useState} из 'react'

const Пример = () => {
  // создаем состояние "счетчик"
  const [количество, setCount] = useState (0)

  возвращение (
    

Нажатие кнопки {count} раз

) } экспорт по умолчанию Пример

С помощью useState вы можете легко создавать функциональные компоненты с отслеживанием состояния. Старый эквивалентный способ с использованием компонентов класса с Component class и setState:

импортировать React, {Component} из 'react'

class Example extends Component {
  конструктор (реквизит) {
    супер (реквизит)
    this.state = {count: 0}
  }

  оказывать() {
    const {count} = this.state
    возвращение (
      

Нажатие кнопки {count} раз

) } } экспорт по умолчанию Пример

Источник:

Ссылки:

Давайте очень легко поймем useState

предположим, у нас есть код реакции: -

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Test from './components/Test.jsx'
ReactDOM.render(
  
, document.getElementById('root') );

Test.jsx

import React from "react";

function Test() {
  var x = 5;
  function update() {
    console.log(x);
    return x++;
  }
  return (
    

{x}

); } export default Test;

здесь, на странице будет отображаться 5, хотя мы вызываем функцию обновления, нажимая кнопку, потому что мы обновляем x, но не в промежутке между тегами h1, но на самом деле x постоянно изменяется всякий раз, когда мы нажимаем, но это пила на консоли

посмотреть результат и проверить консоль, нажав на эту ссылку

здесь usState волшебным образом работает,

Test.jsx с использованием useState

import React, { useState } from "react";

function Test() {
  var x = 5;
  const [value, setValue] = useState(x);

  function update() {
    setValue(value + 1);
  }

  return (
    

{value}

); } export default Test;

посмотреть результат по этой ссылке

здесь, при нажатии кнопки значение будет постоянно обновляться, потому что здесь мы используем useState, это функция, которая возвращает 2 вещи, одна - текущее значение состояния, а другая - функция, если мы передадим какое-либо значение этой функции, она обновит текущее состояние vlue и текущее значение состояния обновит его значение во всех местах где угодно он использовался без написания дополнительного кода.

Хуки - это новая функция в React v16.7.0-alpha. useState - это «Перехватчик».useState () установить значение по умолчанию для любой переменной и управлять в функциональном компоненте (функции PureComponent).например: const [count, setCount] = useState (0); установить значение по умолчанию для count 0. и u может использовать setCount до приращение или уменьшение значение.onClick = {() => setCount (count + 1)} увеличить значение счетчика.DOC

useState () - это пример встроенной ловушки React, которая позволяет вам использовать состояния в ваших функциональных компонентах. Это было невозможно до React 16.7.

Функция useState - это встроенный обработчик, который можно импортировать из пакета реакции. Это позволяет вам добавлять состояние к вашим функциональным компонентам. Используя ловушку useState внутри функционального компонента, вы можете создать часть состояния, не переключаясь на компоненты класса.

useState - это ловушка, которая позволяет вам добавлять состояние к функциональному компоненту. Он принимает аргумент, который является начальным значением свойства состояния, и возвращает текущее значение свойства состояния и метод, который может обновлять это свойство состояния.
Ниже приводится простой пример:

import React, { useState } from react    

function HookCounter {    
  const [count, setCount]= useState(0)    
    return(    
      
) }

useState принимает начальное значение переменной состояния, которое в данном случае равно нулю, и возвращает пару значений. Текущее значение состояния было вызвано count, а метод, который может обновлять переменную состояния, был вызван как setCount.

Basically React.useState(0) magically sees that it should return the tuple count and setCount (a method to change count). The parameter useState takes sets the initial value of count.

  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(0);

  // increments count by 1 when first button clicked
  function handleClick(){
    setCount(count + 1);
  } 

  // increments count2 by 1 when second button clicked
  function handleClick2(){
    setCount2(count2 + 1);
  } 

  return (
    

A React counter made with the useState Hook!

You clicked {count} times

You clicked {count2} times

);

На основе примера Энмануэля Дюрана, но показывает два счетчика и записывает лямбда-функции как обычные функции, так что некоторым людям это может быть проще.

useState - это перехватчик, который позволяет вам иметь переменные состояния в функциональных компонентах.

В React есть два типа компонентов: класс и функциональные компоненты.

Компоненты класса - это классы ES6, которые происходят от React.Component и могут иметь методы состояния и жизненного цикла:

class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
  message: ‘’    
 };
}

componentDidMount() {
/* ... */
 }

render() {
return 
{this.state.message}
; } }

Функциональные компоненты - это функции, которые просто принимают аргументы как свойства компонента и возвращают действительный JSX:

function Message(props) {
  return 
{props.message}
} // Or as an arrow function const Message = (props) =>
{props.message}

Как видите, нет методов состояния или жизненного цикла.

Синтаксис хука useState прост.

const [значение, setValue] = useState (defaultValue)

Если вы не знакомы с этим синтаксисом, перейдите сюда.

Я бы порекомендовал вам прочитать документацию . Там отличные объяснения с приличным количеством примеров.

импорт {useState} из 'react';

function Example () {
    // Объявить новую переменную состояния, которую мы назовем "count"
    const [счетчик, setCount] = useState (0);
  
  // решать вам, как вы это делаете
  const buttonClickHandler = e => {
   // увеличиваем
   // setCount (счетчик + 1)
   
   // уменьшение
   // setCount (счет -1)
   
   // что-либо
   // setCount (0)
  }
  

  возвращение (
       

Вы нажали {count} раз

); }

useState - один из хуков, доступных в React v16.8.0. По сути, он позволяет вам превратить ваши функциональные / несуществующие компоненты в компоненты, которые могут иметь собственное состояние.

На самом базовом уровне это используется следующим образом:

const [isLoading, setLoading] = useState(true);

Это позволяет вам вызвать setLoading, передав логическое значение. Это отличный способ иметь функциональный компонент с отслеживанием состояния.

useState - одна из встроенных обработчиков реакции, доступных в версии 0.16.7.

useState следует использовать только внутри функциональных компонентов.useState - это способ, если нам нужно внутреннее состояние и не нужно реализовывать более сложную логику, такую ​​как методы жизненного цикла.

const [state, setState] = useState(initialState);

Возвращает значение с отслеживанием состояния и функцию для его обновления.

Во время первоначального рендеринга возвращаемое состояние (состояние) такое же, как и значение, переданное в качестве первого аргумента (initialState).

Функция setState используется для обновления состояния. Он принимает новый значение состояния и ставит в очередь повторную визуализацию компонента.

Обратите внимание, что useState обратный вызов ловушки для обновления состояния ведет себя иначе, чем компоненты this.setState. Чтобы показать вам разницу, я приготовил два примера.

класс UserInfoClass расширяет React.Component {
  состояние = {firstName: 'John', lastName: 'Doe'};
  
  оказывать() {
    возврат 

userInfo: {JSON.stringify (this.state)}

; } } // Обратите внимание, что новый объект создается при использовании обратного вызова setUserInfo function UserInfoFunction () { const [userInfo, setUserInfo] = React.useState ({ firstName: 'John', lastName: 'Doe', }); возвращение (

userInfo: {JSON.stringify (userInfo)}

); } ReactDOM.render (
, document.querySelector ('# app'));



Новый объект создается при использовании обратного вызова setUserInfo. Обратите внимание, что мы потеряли значение ключа lastName. Чтобы исправить это, мы могли передать функцию внутри useState.

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

См. Пример:

// Обратите внимание, что новый объект создается при использовании обратного вызова setUserInfo
function UserInfoFunction () {
  const [userInfo, setUserInfo] = React.useState ({
    firstName: 'John', lastName: 'Doe',
  });

  возвращение (
    

userInfo: {JSON.stringify (userInfo)}

); } ReactDOM.render ( , document.querySelector ('# app'));



В отличие от метода setState в компонентах класса, useState выполняет не объединять объекты обновления автоматически. Вы можете повторить это поведение, комбинируя форму обновления функции с расширением объекта синтаксис:

setState (prevState => {
  // Object.assign также будет работать
  return {... prevState, ... updatedValues};
});

Подробнее о useState см. официальную документацию.

2022 WebDevInsider