반응에서 구성 요소 상태를 수정하는 방법

반응에서는 setState()를 사용하여 구성 요소의 상태를 수정할 수 있습니다. setState()는 구성 요소 상태에 대한 변경 사항을 대기열에 추가하고 최신 구문을 가져오는 데 사용되는 메서드입니다. "setState(updater,[콜백 함수])".

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React에서 컴포넌트 상태를 수정하는 방법

React에서는 컴포넌트의 상태를 직접 수정할 수 없습니다. setState()를 통해 수정해야 합니다.

React에서 setstate는 컴포넌트 상태를 업데이트하는 데 사용되는 메서드입니다. setState()는 구성 요소 상태에 대한 변경 사항이 대기열에 추가되고 React는 업데이트된 상태를 사용하여 이 구성 요소와 해당 하위 구성 요소를 다시 렌더링해야 한다는 알림을 받습니다. 구문은 "setState(object, [callback function])"입니다.

Syntax:

setState(updater[, callback])

updater updater

업데이트 후 실행되는 콜백 콜백 함수

Modify state

예를 들어 직접 수정을 통해 state의 콘텐츠 값을 '향향'

state = {
  content: '大熊'
}

으로 변경하고 싶다면 뷰 업데이트를 트리거할 수 없습니다.

this.state.content = '香香'

는 setState를 통해 수정되어야 합니다.

this.setState({
  content: '香香'
})

최신 상태 값을 가져옵니다.

setState()는 비동기식이므로 상태를 수정한 후 반드시 최신 값을 가져오지 못할 수도 있습니다. 최신 상태 값을 얻으려면 setState()에 콜백 함수를 제공하면 됩니다. 이 콜백은 상태가 업데이트된 후에 실행됩니다. 콜백 함수에서 최신 상태를 얻을 수 있습니다.

예:

this.setState({
  content: '香香'
}, () => {
  // 通回调获取最新的状态
  console.log(this.state.content)
})

setState () 매개변수는 함수일 수도 있습니다. 이 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 업데이트 전 상태 값이고, 두 번째 매개변수는 상태를 수정할 때 상위 구성요소가 전달한 데이터를 얻을 수 있는 props입니다. 이전 매개변수가 포함됩니다. 이 형식은 상태 값이 사용될 때 사용할 수 있습니다.

this.setState((state, props) => {
  console.log(state.content, props)
  // 返回一个对象
  return {
    content: prev.content + '香香'
  }
})

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 구성 요소 상태를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!