setState가 상태를 즉시 업데이트하지 않음

setState가 상태를 즉시 업데이트하지 않음

이 질문에는 이미 답변이 있습니다.

react setState 메서드를 호출하면 상태가 즉시 변환되지 않는 이유는 무엇입니까? (9개의 답변)

useState set 메서드가 변경을 즉시 반영하지 않습니다. (15개의 답변)

닫힘7개월 전에요.

안 요.onClick ★★★을 바인드 할 가 있다고 합니다. 제가 좀 전에 검색해 봤는데onClick함수는 생성자에 있지만 상태는 여전히 업데이트되지 않습니다.

제 코드는 다음과 같습니다.

import React from 'react';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import BoardAddModal from 'components/board/BoardAddModal.jsx';    
import style from 'styles/boarditem.css';

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);    
        this.state = {
            boardAddModalShow: false
        };    
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true }); // set boardAddModalShow to true

        /* After setting a new state it still returns a false value */
        console.log(this.state.boardAddModalShow);   
    }

    render() {    
        return (
            <Col lg={3}>
                <a href="javascript:;" 
                   className={style.boardItemAdd} 
                   onClick={this.openAddBoardModal}>
                    <div className={[style.boardItemContainer,
                                     style.boardItemGray].join(' ')}>
                        Create New Board
                    </div>
                </a>
            </Col>
        );
    }
}

export default BoardAdd

좀합니다.왜냐하면 이 상태이기 때문입니다.console.log(this.state.boardAddModalShow)스테이트가 변이하기 전에 실행되며 이전 값이 출력으로 표시됩니다..setState

openAddBoardModal() {
  this.setState({ boardAddModalShow: true }, function () {
    console.log(this.state.boardAddModalShow);
  });
}

setState을 사용하다에 전화를 걸 수 수 없다는 입니다.

React 문서에 따르면

setState()는 즉시 .this.state을 사용법" " 의 액세스this.state이 메서드를 호출하면 기존 값이 반환될 수 있습니다.setState에 대한 콜의 동기 동작은 보증되지 않으며 성능 향상을 위해 콜이 배치될 수 있습니다.

은 왜 why를 ?setState

그 이유는setState상태를 변경하고 재렌더링을 일으킵니다.이 작업은 비용이 많이 들고 동기화가 되면 브라우저가 응답하지 않을 수 있습니다.

'이러다'는setState호출은 비동기식일 뿐만 아니라 UI 익스피리언스와 퍼포먼스 향상을 위해 배치됩니다.

이다. setState()을 사용하다을 사용하다

이 예를 들어 보겠습니다.

this.setState({ name: "myname" }, () => {                              
        //callback
        console.log(this.state.name) // myname
      });

this.state를 사용하다
you mutated/updated콜백의 데이터

하여 이 는 " "가 필요합니다.useEffect.

function App() {
  const [x, setX] = useState(5)
  const [y, setY] = useState(15) 

  console.log("Element is rendered:", x, y)

  // setting y does not trigger the effect
  // the second argument is an array of dependencies
  useEffect(() => console.log("re-render because x changed:", x), [x])

  function handleXClick() {
    console.log("x before setting:", x)
    setX(10)
    console.log("x in *line* after setting:", x)
  }

  return <>
    <div> x is {x}. </div>
    <button onClick={handleXClick}> set x to 10</button>
    <div> y is {y}. </div>
    <button onClick={() => setY(20)}> set y to 20</button>
  </>
}

출력:

Element is rendered: 5 15
re-render because x changed: 5
(press x button)
x before setting: 5
x in *line* after setting: 5
Element is rendered: 10 15
re-render because x changed: 10
(press y button)
Element is rendered: 10 20

라이브 버전

setSatate는 비동기 함수이기 때문에 이와 같이 상태를 콜백으로 콘솔해야 합니다.

openAddBoardModal(){
    this.setState({ boardAddModalShow: true }, () => {
        console.log(this.state.boardAddModalShow)
    });
}

setState()는 항상 컴포넌트를 즉시 업데이트하지 않습니다.업데이트를 배치하거나 나중에 연기할 수 있습니다.이렇게 , 「이.」를 호출한 「이」가 .을 사용하다setState()''를 사용합니다.componentDidUpdate ★★★setStatecallback)setState(updater, callback)어느 쪽이든 업데이트가 적용된 후 부팅이 보증됩니다.이전 상태를 기준으로 상태를 설정해야 하는 경우 아래 updater 인수에 대해 읽어보십시오.

setState()입니다.shouldComponentUpdate()거짓으로 속이다 조건부 을 에서 할 수 경우shouldComponentUpdate(), 호출, 호출setState()새로운 상태가 이전 상태와 다른 경우에만 불필요한 재검출을 피할 수 있습니다.

첫 번째 인수는 시그니처를 가진 업데이터 함수입니다.

(state, props) => stateChange

state는 변경이 적용되었을 때의 컴포넌트 상태를 나타냅니다.을 사용하다대신, 상태 및 소품으로부터의 입력을 기반으로 새로운 객체를 구축하여 변화를 표현해야 합니다.예를 들어, 소품별로 상태 값을 증가시킨다고 가정합니다.★★★★

this.setState((state, props) => {
    return {counter: state.counter + props.step};
});

setState()컴포넌트를 업데이트하기 위한 즉각적인 명령어가 아닌 요청으로 사용됩니다.더 나은 성능을 위해 React는 성능을 지연시킨 다음 여러 구성 요소를 한 번에 업데이트할 수 있습니다.React는 상태 변경이 즉시 적용되는 것을 보증하지 않습니다.

상세한 것에 대하여는, 이것을 확인해 주세요.

이 경우 상태 업데이트 요청을 보냈습니다.React가 응답하는 데 시간이 걸립니다.지금 당장 하려고 하면console.log상태가 되면 오래된 가치를 얻을 수 있습니다.

위의 솔루션은 useState 훅에서는 동작하지 않습니다.아래 코드를 사용할 수 있습니다.

setState((prevState) => {
        console.log(boardAddModalShow)
        // call functions
        // fetch state using prevState and update
        return { ...prevState, boardAddModalShow: true }
    });

이 콜백은 정말 엉망이야.대신 비동기 대기만 사용하십시오.

async openAddBoardModal(){
    await this.setState({ boardAddModalShow: true });
    console.log(this.state.boardAddModalShow);
}

상태가 갱신되고 있는지 아닌지를 추적하는 경우는, 같은 조작을 실시하는 것입니다.

_stateUpdated(){
  console.log(this.state. boardAddModalShow);
}

openAddBoardModal(){
  this.setState(
    {boardAddModalShow: true}, 
    this._stateUpdated.bind(this)
  );
}

이렇게 하면 디버깅 상태를 업데이트하려고 할 때마다 메서드를 "_stateUpdated"라고 호출할 수 있습니다.

답변이 , 가 이 해서 다른 을 찾고 , 이 페이지에는 좋은 답변이 많이 있습니다.useState사용자 입력에 따라 열거나 닫아야 하는 네비게이션 드로어 등의 UI 컴포넌트를 구현하는 경우 이 답변이 도움이 됩니다.

useState편리한 어프로치인 것 같고, 상태가 바로 설정되어 있지 않기 때문에, 당신의 웹사이트나 앱이 지연되어 보입니다.페이지가 충분히 클 경우 상태 변경 시 업데이트해야 할 내용을 계산하는 데 시간이 오래 걸립니다.

사용자 액션에 따라 UI를 즉시 변경하고 싶을 때 ref를 사용하여 직접 DOM을 조작하는 것이 좋습니다.

이 퍼스푸스에 상태를 사용하는 것은 반응 시 좋지 않은 생각입니다.

setState()는 비동기입니다.상태가 갱신되고 있는지 여부를 확인하는 가장 좋은 방법은componentDidUpdate()라고는console.log(this.state.boardAddModalShow)끝나고this.setState({ boardAddModalShow: true }).

React Docs에 따르면

setState()는 컴포넌트를 업데이트하기 위한 즉각적인 명령어가 아니라 요청으로 간주합니다.더 나은 성능을 위해 React는 성능을 지연시킨 다음 여러 구성 요소를 한 번에 업데이트할 수 있습니다.React는 상태 변경이 즉시 적용되는 것을 보장하지 않습니다.

React Docs에 따르면

React는 상태 변경이 즉시 적용되는 것을 보증하지 않습니다.이것에 의해, setState() 를 호출한 직후의 this.state 를 읽어낼 가능성이 있습니다.pitfall이 경우, 이 경우,existing에 기인하는 가치async자연.대신,componentDidUpdate또는setStatesetState 조작이 성공한 직후에 실행되는 콜백.일반적으로는 다음을 사용하는 것이 좋습니다.componentDidUpdate()대신 그런 논리를 위해.

예:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      counter: 1
    };
  }
  componentDidUpdate() {
    console.log("componentDidUpdate fired");
    console.log("STATE", this.state);
  }

  updateState = () => {
    this.setState(
      (state, props) => {
        return { counter: state.counter + 1 };
      });
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.updateState}>Update State</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 this.setState({
    isMonthFee: !this.state.isMonthFee,
  }, () => {
    console.log(this.state.isMonthFee);
  })

코드를 실행하고 콘솔에서 출력을 확인했을 때 정의되어 있지 않음을 나타냅니다.내가 찾아보고 나에게 맞는 것을 찾은 후에.

componentDidUpdate(){}

저는 이 메서드를 code에 constructor() 뒤에 추가했습니다.React Native Workflow의 라이프 사이클을 확인합니다.

https://images.app.goo.gl/BVRAi4ea2P4LchqJ8

setState는 비동기 함수이기 때문에 Yes입니다.설정 상태를 쓴 후 바로 상태를 설정하는 가장 좋은 방법은 다음과 같이 Object.assign을 사용하는 것입니다.예를 들어 속성을 is Valid를 true로 설정하는 경우 다음과 같이 수행합니다.

---

Object.assign(this.state, {isValid: true})

---

이 행을 작성한 직후에 갱신된 상태에 액세스 할 수 있습니다.

언급URL : https://stackoverflow.com/questions/41278385/setstate-doesnt-update-the-state-immediately