setState가 즉시 업데이트되지 않음

setState가 즉시 업데이트되지 않음

나는 할 일을 신청하고 있다.이것은 문제를 일으키는 코드의 매우 간단한 버전입니다.체크박스가 있습니다.

 <p><input type="checkbox"  name="area" checked={this.state.Pencil}   onChange={this.checkPencil}/> Writing Item </p>

체크박스를 호출하는 함수는 다음과 같습니다.

checkPencil(){
   this.setState({
      pencil:!this.state.pencil,
  }); 
  this.props.updateItem(this.state);
}

updateItem은 디스패치를 위해 redx로 매핑되는 함수입니다.

function mapDispatchToProps(dispatch){
  return bindActionCreators({ updateItem}, dispatch);
}

문제는 업데이트를 호출할 때항목 작업 및 console.log 상태. 항상 1단계 늦습니다.체크박스가 꺼지고 true가 아닌 경우에도 true 상태가 업데이트로 전달됩니다.아이템 기능상태를 강제로 업데이트하려면 다른 기능을 호출해야 합니까?

setState는 비동기적으로 발생하므로 setState에 대한 콜백으로 두 번째 함수를 호출해야 합니다.예를 들어 다음과 같습니다.

this.setState({pencil:!this.state.pencil}, myFunction)

다만, 당신의 경우, 그 기능을 파라미터로 호출하고 싶기 때문에, 당신은 조금 더 창의적이고, 아마도 소품에서 기능을 호출하는 당신만의 기능을 만들어야 할 것입니다.

myFunction = () => {
  this.props.updateItem(this.state)
}

그것들을 함께 결합하면 효과가 있을 것이다.

부르기setState()in React는 다양한 이유로 비동기적입니다(주로 퍼포먼스).'리액트'는 여러 콜을 일괄 처리합니다.setState()단일 상태 변환으로 변환한 후 모든 상태 변화에 대해 다시 변환하지 않고 컴포넌트를 한 번 다시 변환합니다.

다행히 해결책은 간단합니다.setState는 콜백 파라미터를 받아들입니다.

checkPencil: () => {
   this.setState(previousState => ({
      pencil: !previousState.pencil,
   }), () => {
      this.props.updateItem(this.state);
   });
}

Ben Hare의 답변에 따르면, 누군가가 React Hooks를 사용하여 같은 것을 달성하고 싶다면 아래에 샘플 코드를 추가했습니다.

import React, { useState, useEffect } from "react"

let [myArr, setMyArr] = useState([1, 2, 3, 4]) // the state on update of which we want to call some function

const someAction = () => {
  let arr = [...myArr]
  arr.push(5) // perform State update
  setMyArr(arr) // set new state
}

useEffect(() => { // this hook will get called every time myArr has changed
   // perform some action every time myArr is updated
   console.log('Updated State', myArr)
}, [myArr])

현재 상태의 속성을 사용하여 상태를 업데이트하는 경우 React 문서에서 다음 버전의 함수 호출을 사용하도록 권장합니다.setState오브젝트 대신.

그렇게setState((state, props) => {...})대신setState(object).

그 이유는setState는 즉각적인 변경이라기보다는 상태 변경에 대한 요구입니다.대응 배치setState퍼포먼스 향상을 요구하다

그 말은 당신이 확인하고 있는 주 소유물이 불안정할 수도 있다는 뜻이죠이것은 알아두어야 할 잠재적인 함정입니다.

상세한 것에 대하여는, 다음의 문서를 참조해 주세요.https://facebook.github.io/react/docs/react-component.html#setstate

---

당신의 질문에 대답하기 위해, 저는 이렇게 할 것입니다.

checkPencil(){
    this.setState((prevState) => {
        return {
            pencil: !prevState.pencil
        };
    }, () => {
        this.props.updateItem(this.state)
    });
}

비동기적으로 발생하기 때문에 아직 업데이트되지 않았을 수 있습니다.

v. v.16의 두 .setState()이치노

상태 업데이트가 비동기일 수 있음

React는 성능을 위해 여러 setState() 콜을 단일 업데이트로 일괄 처리할 수 있습니다.

this.props와 this.state는 비동기적으로 갱신될 수 있으므로 다음 상태를 계산할 때 이들 값에 의존해서는 안 됩니다.

예를 들어, 이 코드가 카운터를 갱신하지 못할 수 있습니다.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

이 문제를 해결하려면 오브젝트가 아닌 함수를 받아들이는 setState()의 두 번째 형식을 사용합니다.이 함수는 첫 번째 인수로 이전 상태를 수신하고 두 번째 인수로 업데이트를 적용할 때의 소품을 수신합니다.

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

먼저 당신의 가치를 설정하고, 그 후에 당신의 일을 계속하세요.

this.setState({inputvalue: e.target.value}, function () {
    this._handleSubmit();
}); 

_handleSubmit() {
   console.log(this.state.inputvalue);
   //Do your action
}

Rossipedia와 Ben Hare의 제안을 모두 사용하여 다음 작업을 수행했습니다.

checkPencil(){
   this.setState({
      pencil:!this.state.pencil,
   }, this.updatingItem); 
}

updatingItem(){
    this.props.updateItem(this.state)
}

벤은 당면한 문제를 해결하는 방법에 대한 훌륭한 답변을 가지고 있지만, 상태를 중복시키지 않는 것이 좋습니다.

상태가 환원 상태일 경우 체크박스는 자신의 컴포넌트와 글로벌스토어 양쪽에서 체크상태를 추적하지 않고 프로펠러 또는 스토어에서 자신의 상태를 읽어야 합니다.

다음과 같은 작업을 수행합니다.

<p>
    <input
        type="checkbox"
        name="area" checked={this.props.isChecked}
        onChange={this.props.onChange}
    />
    Writing Item
</p>

일반적으로 여러 곳에서 필요한 상태를 발견하면 공통의 부모(항상 환원되는 것은 아님)에게 전달하여 하나의 진실 소스만 유지하도록 합니다.

이거 먹어봐

this.setState({inputvalue: e.target.value}, function () {
    console.log(this.state.inputvalue);
    this.showInputError(inputs[0].name);
}); 

showInputError 함수(임의의 형식을 사용하는 경우)를 검증합니다.

setState()는 본질적으로 비동기적입니다.는 이 .async await.

다음은 참조 예를 제시하겠습니다.

continue = async (e) => {
        e.preventDefault();
        const { values } = this.props;
        await this.setState({
            errors: {}
        });
        const emailValidationRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
        if(!emailValidationRegex.test(values.email)){
            await this.setState((state) => ({
                errors: {
                    ...state.errors,
                    email: "enter a valid email"
                }
            }));
        }
   }

또한 다음과 같이 두 번 상태를 업데이트하고 즉시 상태를 업데이트할 수 있습니다. 이 방법은 저에게 효과가 있었습니다.

this.setState(
        ({ app_id }) => ({
          app_id: 2
        }), () => {
          this.setState(({ app_id }) => ({
            app_id: 2
          }))
        } )

다음은 React Hooks 기반 솔루션입니다.

useState는 비동기식으로 갱신됩니다.useEffect★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

변수를 사용할 때마다 반드시 useState의 initialState를 지정합니다.1, 2행처럼.아무것도 입력하지 않으면 두 번 클릭하여 오류 변수를 채웁니다.

  1) let errorsArray = [];
  2) let [errors, setErrors] = useState(errorsArray);
  3) let [firstName, setFirstName] = useState('');
  4) let [lastName, setLastName] = useState('');
  let [gender, setGender] = useState('');
  let [email, setEmail] = useState('');
  let [password, setPassword] = useState('');

  const performRegister = () => {
    console.log('firstName', isEmpty(firstName));
    if (isEmpty(firstName)) {
      console.log('first if statement');
      errorsArray.push({firstName: 'First Name Cannot be empty'});
    }
    if (isEmpty(lastName)) {
      errorsArray.push({lastName: 'Last Name Cannot be empty'});
    }
    if (isEmpty(gender)) {
      errorsArray.push({gender: 'Gender Cannot be empty'});
    }
    if (isEmpty(email)) {
      errorsArray.push({email: 'Email Cannot be empty'});
    }
    if (isEmpty(password)) {
      errorsArray.push({password: 'Password Cannot be empty'});
    }
    console.log('outside ERRORS array :::', errorsArray);
    setErrors(errorsArray);
    console.log('outside ERRORS :::', errors);
    if (errors.length > 0) {
      console.log('ERROR exists');
    }
  };

언급URL : https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately