Response setState가 업데이트되지 않음

Response setState가 업데이트되지 않음

자, 여기 있습니다.

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({ dealersOverallTotal: total });
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

newDealersDeckTotal단지 숫자의 배열일 뿐이다.[1, 5, 9]예: 단,this.state.dealersOverallTotal정확한 합계는 알 수 없지만total문제가 해결됐는지 보려고 타임아웃 지연도 넣었어요아니면 코드를 더 올려야 하나요?

setState()보통 비동기식입니다.즉, 그 시점에서console.log상태는 아직 업데이트되지 않았습니다.의 콜백에 로그를 삽입해 보겠습니다.setState()방법.상태 변경이 완료된 후 실행됩니다.

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
}); 

훅의 경우,useEffect갈고리를 채우다

const [fruit, setFruit] = useState('');

setFruit('Apple');

useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

setState는 비동기입니다.콜백 메서드를 사용하여 업데이트된 상태를 가져올 수 있습니다.

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () => 
    console.log(this.state.yourName));
 }

비동기/대기 사용

async changeHandler(event) {
    await this.setState({ yourName: event.target.value });
    console.log(this.state.yourName);
}

setState는 반응에서 비동기적이기 때문에 콘솔에서 업데이트된 상태를 확인하려면 다음과 같이 콜백을 사용합니다(콜백 함수는 setState 업데이트 후에 실행됩니다).

this.setState({ email: 'test@example.com' }, () => {
   console.log(this.state.email)
)}

리액트 상태를 여러 번 설정할 때 문제가 발생했습니다(항상 디폴트 상태를 사용).이 리액트/기트허브 문제에 따라 나는 효과가 있었다.

const [state, setState] = useState({
  foo: "abc",
  bar: 123
});

// Do this!
setState(prevState => {
  return {
    ...prevState,
    foo: "def"
  };
});
setState(prevState => {
  return {
    ...prevState,
    bar: 456
  };
});

그setState()작업이 비동기적이기 때문에console.log()실행되기 전에setState()값을 변환하면 결과가 나타납니다.

이 문제를 해결하려면 다음 콜백 함수에 값을 기록합니다.setState()예를 들어 다음과 같습니다.

setTimeout(() => {
    this.setState({dealersOverallTotal: total},
    function(){
       console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
    });
}, 10)

함수를 사용하는 경우 UseEffect를 사용하여 setState의 비동기(클래스로 작업할 때처럼 콜백을 사용할 수 없습니다)를 처리해야 합니다.예:

import { useState, useEffect } from "react";

export default function App() {
 const [animal, setAnimal] = useState(null);

 function changeAnimal(newAnimal) {
  setAnimal(newAnimal);
  // here 'animal' is not what you would expect
  console.log("1", animal);
 }

 useEffect(() => {
  if (animal) {
   console.log("2", animal);
  }
 }, [animal]);

 return (
  <div className="App">
  <button onClick={() => changeAnimal("dog")} />
 </div>
 );
}

첫 번째 console.log는 null을 반환하고 두 번째 console.log는 'dog'를 반환합니다.

덧붙이기만 하면 된다componentDidUpdate(){}그 방법이 유효합니다.반응 원어민 라이프 사이클은 여기서 확인할 수 있습니다.

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

setState의 비동기적인 성질에 주의할 뿐만 아니라 경쟁하는 이벤트핸들러가 있는 경우도 있습니다.하나는 원하는 상태 변경을 실행하고 다른 하나는 즉시 다시 원래대로 되돌릴 수 있습니다.예를 들어 on클릭을 처리하는 부모 컴포넌트를 클릭합니다.트레이스를 추가하여 확인합니다.e.stopPropagation을 사용하여 이를 방지합니다.

어떤 복잡한 코드로도 같은 상황을 겪었는데, 기존 제안에서 얻은 것이 하나도 없었습니다.

제 고민은...setState컴포넌트 중 하나에 의해 발행된 콜백 펑크에서 발생하고 있습니다.그리고 제가 의심하는 것은 통화가 동기적으로 이루어졌기 때문에setState전혀 설정 상태를 유지하지 않습니다.

간단히 말해 다음과 같은 것이 있습니다.

render() {
    <Control
        ref={_ => this.control = _}
        onChange={this.handleChange}
        onUpdated={this.handleUpdate} />
}

handleChange() {
    this.control.doUpdate();
}

handleUpdate() {
    this.setState({...});
}

가 ' 방법은 '고친'을 붙이는 이었다.doUpdate()setTimeout음음음같 뭇매하다

handleChange() {
    setTimeout(() => { this.control.doUpdate(); }, 10);
}

이상적이지는 않지만 그렇지 않으면 중요한 리팩터링이 될 것입니다.

언급URL : https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state