React 컴포넌트 상태로 객체를 저장하시겠습니까?

React 컴포넌트 상태로 객체를 저장하시겠습니까?

React 컴포넌트 상태로 객체를 저장할 수 있습니까?[Yes]의 경우 다음 명령을 사용하여 해당 개체의 키 값을 변경하려면 어떻게 변경할 수 있습니까?setState구문적으로 다음과 같이 쓸 수 없다고 생각합니다.

this.setState({ abc.xyz: 'new value' });

비슷한 맥락에서 또 다른 질문이 있습니다.변수 세트를 React 컴포넌트에 저장하지 않고 컴포넌트의 어떤 방법으로도 사용할 수 있도록 해도 될까요?

컴포넌트에 메서드를 선언할 때와 마찬가지로 이러한 변수를 모두 포함하는 단순한 개체를 생성하여 컴포넌트 수준에 배치할 수 있습니다.

코드에 많은 비즈니스 로직을 포함하고 여러 가지 방법으로 값이 변경된 많은 변수를 사용해야 하는 경우 이러한 값을 기반으로 구성 요소의 상태를 변경해야 하는 경우가 발생할 수 있습니다.

따라서 이러한 모든 변수를 상태로 유지하는 대신 값이 UI에 직접 반영되어야 하는 변수만 유지합니다.

이 방법이 여기서 쓴 첫 번째 질문보다 더 나은 경우, 해당 주에 개체를 저장할 필요가 없습니다.

1. this.setState({ abc.xyz: 'new value' });구문은 허용되지 않습니다.전체 대상을 통과해야 합니다.

   this.setState({abc: {xyz: 'new value'}});
   

   abc에 다른 변수가 있는 경우

   var abc = this.state.abc;
   abc.xyz = 'new value';
   this.setState({abc: abc});
   

2. 여기에 의존하지 않을 경우 일반 변수를 사용할 수 있습니다.this.state.

개체의 이전 값에 ES6 스프레드를 사용하여 덮어쓰기를 방지할 수 있습니다.

this.setState({
     abc: {
            ...this.state.abc,
            xyz: 'new value'
           }
});

Kiran의 투고 외에 업데이트 도우미(이전 리액트 애드온)도 있습니다.이것은, npm 에 인스톨 할 수 있습니다.npm install immutability-helper

import update from 'immutability-helper';

var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});

그러면 값이 업데이트된 새 개체가 생성되고 다른 속성은 그대로 유지됩니다.이 기능은 어레이에 푸시하는 것과 동시에 다른 값을 설정해야 하는 경우에 더 유용합니다.어떤 사람들은 그것이 불변성을 제공하기 때문에 어디에서나 그것을 사용한다.

이렇게 하면 다음 기능을 통해 퍼포먼스를 보완할 수 있습니다.

shouldComponentUpdate: function(nextProps, nextState){
   return this.state.abc !== nextState.abc; 
   // and compare any props that might cause an update
}

업데이트 이 답변은 오래되어 현재는 사용되지 않습니다.

1. 상세 업데이트를 시도하려면 후크 및/또는 코드를 리팩터링하는 것이 좋습니다.
2. 기능 컴포넌트를 사용하여useState훅이나 리듀서.
3. 역사적 배경을 위해 이 답을 살려두고 있다.

---

여기 너머에 드래곤들이 있다!

---

this.setState({abc: {xyz: 'new value'}});state.abc병합되지 않고 완전히 덮어쓰게 됩니다.-

이것으로 충분합니다.

this.setState((previousState) => {
  previousState.abc.xyz = 'blurg';
  return previousState;
});

제가 문서를 잘못 읽고 있는 경우를 제외하고 페이스북은 위의 형식을 권장합니다.https://facebook.github.io/react/docs/component-api.html

또한 상태를 변환하지 않는 가장 직접적인 방법은 ES6 spread/rest 연산자를 사용하여 직접 복사하는 것입니다.

const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy
newState.xyz = 'blurg';
this.setState(newState);

한 줄의 코드로 간단하게 할 수 있는 방법

this.setState({ object: { ...this.state.object, objectVarToChange: newData } })

불변성 도우미 등을 통해 실행할 수 있지만 꼭 필요한 경우가 아니면 코드에 외부 종속성을 추가하고 싶지 않습니다.내가 해야 할 때, 나는 그것을 사용한다.Object.assign ★★★★

this.setState({ abc : Object.assign({}, this.state.abc , {xyz: 'new value'})})

HTML 이벤트 속성에서도 사용할 수 있습니다.예:

onChange={e => this.setState({ abc : Object.assign({}, this.state.abc, {xyz : 'new value'})})}

기능 컴포넌트를 사용하여 오브젝트를 상태에 저장하려면 다음을 수행합니다.

import React from 'react';
import {useState, useEffect} from 'react';

const ObjectState= () => {
    const [username, setUsername] =  useState({});

    const usernameSet = () => {
        const name = {
            firstname: 'Naruto',
            familyname: 'Uzmaki' 
        }
        setUsername(prevState => name);
    }

    return(
        <React.Fragment>
            <button onClick= {usernameSet}>
                Store Object
            </button>
           {username.firstname} {username.familyname} 
        </React.Fragment>
    )
}

export default ObjectState;

기존 개체에 개체를 추가하는 경우.

import React from 'react';
import {useState, useEffect} from 'react';

const ObjectState= () => {
    const [username, setUsername] =  useState({village: 'Konoha'});

    const usernameSet = () => {
        setUsername((prevState) => {
            const data = {
                ...prevState, 
                firstname: 'Naruto',
                familyname: 'Uzmaki' 
            }
            return data
        });
    }

    return(
        <React.Fragment>
            <button onClick= {usernameSet}>
                Store Object
            </button>
            {username.village} {username.firstname} {username.familyname} 
        </React.Fragment>
    )
}

export default ObjectState;

추신 : 컴포넌트의 이름을 'Object'로 지정하면 'Maximum call stack size exceededed error'가 발생합니다.다른 이름들은 괜찮지만 어떤 이유에선지 'Object'는 그렇지 않다.다음과 같이 하면 안 된다.

    const Object = () => {
        // The above code
    };

    export default Object;

그 이유나 예방법을 아시는 분은 댓글에 추가해 주세요.

언급URL : https://stackoverflow.com/questions/27105257/storing-an-object-in-state-of-a-react-component