Блог

Главная - Вопросы по программированию - prevState не обновляет значение состояния немедленно в React JS

prevState не обновляет значение состояния немедленно в React JS

#javascript #reactjs #setstate

#javascript #reactjs #setstate

Вопрос:

Я пытаюсь немедленно обновить значение состояния с помощью prevState, но значение не меняется. Я знаю, что seState — это функция asycnc, но если я использую prevState, не следует обновлять немедленно? Где я делаю ошибку?

    count: 0
  
     this.setState((prevState) => ({
      count: prevState  1
    }));

    console.log(this.state.count " count")

Комментарии:

1. «но если я использую prevState, не следует обновлять немедленно?» Нет. Не имеет значения, какую форму setState вы используете. Это всегда асинхронно.

2. состояние обновляется асинхронно независимо от того, используете вы предыдущее состояние или нет. Состояние и реквизиты в пределах определенного рендеринга компонента являются постоянными.

3. Я понимаю, спасибо, так есть ли какая-либо причина для получения значения сразу после обновления состояния?

4. o есть ли какая-либо причина для получения значения сразу после обновления состояния? — вы не можете получить обновленное значение состояния в рамках того же рендеринга, но вы могли бы передать второй необязательный обратный вызов this.setState . Этот обратный вызов вызывается после обновления состояния.

Ответ №1:

Хорошо, вы должны понять следующее

 function foo() {
  this.setState((prevState) => ({
    count: prevState   1,
  }));
}

//call function first and then log
foo()
console.log(count) // here you will get your answer

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

Ответ №2:

Как вы знаете, setState является асинхронным. Но также узнайте, передаете ли вы обратный вызов в setstate, тогда вам нужно вызвать prevState.something как something is your state . ИТАК, в основном вам нужно сделать это:

 this.setState(
      (prevState) => ({
        count: prevState.count   1
      }),
      () => {
        console.log(this.state.count   " count");
      }
    );

Вот POC:

 import React from "react";
import "./styles.css";

class Test extends React.Component {
  state = {
    count: 0
  };

  handleClick = () => {
    this.setState(
      (prevState) => ({
        count: prevState.count   1
      }),
      () => {
        console.log(this.state.count   " count");
      }
    );
  };

  render() {
    return (
      <>
        {this.state.count}
        <button onClick={this.handleClick}>Click </button>
      </>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Test />
    </div>
  );
}

Вот демонстрация:https://codesandbox.io/s/serene-beaver-cu4bl?file=/src/App.js:0-596

Ответ №3:

это должно быть prevState.count 1