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 });
// After setting a new state it still return 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
답변
이 콜백은 정말 지저분합니다. 대신 async await를 사용하십시오.
async openAddBoardModal(){
await this.setState({ boardAddModalShow: true });
console.log(this.state.boardAddModalShow);
}
답변
상태를 변경하는 데 약간의 시간이 필요 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에 대한 호출의 동기 작업이 보장되지 않으며 성능 향상을 위해 호출이 일괄 처리 될 수 있습니다.
왜 setState비동기로 만들 까요?
이는
setState상태를 변경하고 다시 렌더링 하기 때문 입니다. 이는 비용이 많이 드는 작업 일 수 있으며이를 동기식으로 만들면 브라우저가 응답하지 않을 수 있습니다.따라서
setState호출은 더 나은 UI 경험과 성능을 위해 비동기식이며 일괄 처리됩니다.
답변
다행히 setState() 콜백을받습니다. 그리고 이것이 업데이트 된 상태를 얻는 곳입니다.
이 예를 고려하십시오.
this.setState({ name: "myname" }, () => {
//callback
console.log(this.state.name) // myname
});
따라서 콜백이 발생하면 this.state가 업데이트 된 상태입니다. 콜백에서 데이터를
얻을 수 있습니다 mutated/updated.
답변
setSatate는 비동기 함수이므로 이와 같은 콜백으로 상태를 콘솔 화해야합니다.
openAddBoardModal(){
this.setState({ boardAddModalShow: true }, () => {
console.log(this.state.boardAddModalShow)
});
}
답변
setState()항상 구성 요소를 즉시 업데이트하지는 않습니다. 나중에 업데이트를 일괄 처리하거나 연기 할 수 있습니다. 이것은 setState()잠재적 인 함정 을 호출 한 직후 this.state를 읽도록 합니다. 대신 componentDidUpdate또는 setState콜백 ( setState(updater, callback))을 사용 하세요 .이 중 하나는 업데이트가 적용된 후에 실행됩니다. 이전 상태를 기반으로 상태를 설정해야하는 경우 아래 업데이트 프로그램 인수에 대해 읽어보세요.
setState()shouldComponentUpdate()false를 반환 하지 않는 한 항상 다시 렌더링 합니다. 변경 가능한 객체를 사용하고에서 조건부 렌더링 논리를 구현할 수없는 경우 새 상태가 이전 상태와 다를 때만 shouldComponentUpdate()호출 setState()하면 불필요한 다시 렌더링을 방지 할 수 있습니다.
첫 번째 인수는 서명이있는 업데이트 프로그램 함수입니다.
(state, props) => stateChange
state변경 사항이 적용되는 시점의 구성 요소 상태에 대한 참조입니다. 직접 변형되어서는 안됩니다. 대신 state 및 props의 입력을 기반으로 새로운 객체를 구축하여 변경 사항을 표현해야합니다. 예를 들어, props.step에 의해 state의 값을 증가시키고 싶다고 가정합니다.
this.setState((state, props) => {
return {counter: state.counter + props.step};
});
답변
상태가 업데이트되고 있는지 추적하려는 경우 동일한 작업을 수행하는 또 다른 방법은
_stateUpdated(){
console.log(this.state. boardAddModalShow);
}
openAddBoardModal(){
this.setState(
{boardAddModalShow: true},
this._stateUpdated.bind(this)
);
}
이렇게하면 디버깅을 위해 상태를 업데이트하려고 할 때마다 “_stateUpdated”메서드를 호출 할 수 있습니다.
답변
setState()비동기입니다. 상태가 업데이트 중인지 확인하는 가장 좋은 방법 componentDidUpdate()은에 있고 console.log(this.state.boardAddModalShow)뒤에 넣지 않는 것 this.setState({ boardAddModalShow: true })입니다.
React Docs 에 따르면
setState ()를 구성 요소를 업데이트하기위한 즉각적인 명령이 아니라 요청으로 생각하십시오. 더 나은 성능을 위해 React는이를 지연시킨 다음 한 번에 여러 구성 요소를 업데이트 할 수 있습니다. React는 상태 변경이 즉시 적용된다는 것을 보장하지 않습니다.
