[리액트] state 구조가 배열 안에 객체 안에 객체 값 변경

문제 발생

[
    {
    A {	
    	"id" : "1",
    	"content" : "안녕하세요"
    }
    B {
    	"createData" : 2022-09-27"
     }
    } 
    ,
    
    {
    A {
    	"id" : "2",
    	"content" : "감사해요"
    }
    B {
    	"createData" : 2022-09-27"
     }
    }
]

 

예를 들어 다음과 같은 구조에서 id가 1인 A의 content 값을 바꾸고 싶다.

 

구상

1. map과 삼항 연산자를 이용한다 => 해결

 

해결 내용

// newMsg

{"id":"1", "content":"잘있어요"}

위와 같은 새로운 메시지가 들어왔다고 하자.

setContent(
	content.map(msg) =>
    msg.A.id === newMsg.id ? {...msg, A:{content : newMsg.content} } : msg
)

다음과 같이 작성하면 해결 할 수 있다.

 

설명을 붙이자면

conetent state의 A의 id 와 newMsg의 id를 하나하나 비교한다.

1. 일치하면 해당 msg 값을 가져오고 그중 A의 content를 newMsg의 content로 바꾸어 저장한다.

2. 일치하지 않으면 그 msg를 그대로 가져와 content에 저장한다.