programing

Response setState + 'prevState'는 어디에서 유래합니까?

newnotes 2023. 3. 1. 11:31
반응형

Response setState + 'prevState'는 어디에서 유래합니까?

저는 이제 막 리액트와 자바스크립트를 배우기 시작했어요.
튜토리얼을 진행하는 동안 이 컴포넌트 코드 예제를 보고 전환 버튼을 만들었습니다.
이것은 코드의 일부입니다.

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({    // prevState?
            isToggleOn: !prevState.isToggleOn
        }));
    }

나를 괴롭히는 두 가지 일:

  1. 어디서?prevState논쟁은 어디서 왔나요?
    그런 게 안 보여var prevState = this.state;그리고 여전히 효과가 있습니다.
  2. 화살표 함수의 구문: 화살표 뒤에 괄호가 있는 이유는 무엇입니까?
    왜 평소와 같지 않은가?arg => { statement; }여기서 구문이 작동합니까?

신입사원 질문 죄송합니다...

  1. prevStateReact에 의해 제공됩니다.props둘 다 옵션입니다.

    • 업데이트 4/13/19: React는 이름을 변경하여 setState 함수 매뉴얼을 변경했습니다.prevState로.updater콜백 함수는 2개의 인수를 사용합니다.state그리고.props변경 내용이 적용되고 있습니다.
  2. 괄호는 여러 줄을 사용할 수 있으며 괄호를 사용하지 않을 경우 강제로 사용할 수 있습니다.return한 줄만 쓸 수 있지만 곱슬곱슬한 줄은 필요 없습니다.

    • 업데이트: 괄호를 넣어야 하는 구체적인 경우를 언급하는 것을 잊었습니다.오브젝트를 반환할 때,return문장은 괄호로 둘러싸야 합니다.@joedotnot 감사합니다.그렇게() => {foo: true}함수처럼 보이기 때문에 에러가 발생합니다.foo: true유효하지 않은 행입니다.이 문제를 해결하려면() => ({ foo: true })

이것을 사용합니다.(예시)

const [modal, setModal] = useState(false);
const [dataAction, setDataAction] = useState({name: '', description: ''});

const _handleChangeName = (data) => {
    if(data.name)
        setDataAction( prevState  => ({ ...prevState,   name : data.name }));
    if(data.description)
        setDataAction( prevState  => ({ ...prevState,   description : data.description }));
  };

언급URL : https://stackoverflow.com/questions/41655402/react-setstate-where-does-prevstate-come-from

반응형