홈>
처음에는 다음과 같은 상태 구조가 있습니다 :
messages:[
{id: 1, name: 'name1'},
{id: 2, name: 'name2'}, ...
]
내가 원하는 것은
id
에 따라 하나의 메시지를 업데이트하는 것입니다.
키. 서버에서 다음과 같은 다른 객체를 얻습니다.
{id: 2, name: 'newName2'}
상태는 배열이다 :
(2) [{…}, {…}]
. 어떤 색인을 어떤 요소와 함께 업데이트해야할지 모르겠습니다. 객체 내부의 id 키만 알고 있습니다.
키 값을 기준으로 상태 내의 객체를 업데이트하는 방법은 무엇입니까?
- 답변 # 1
- 답변 # 2
{key:'value'}
로 저장하는 것이 좋습니다. 키로 찾아야하는 경우 쌍입니다.몇 가지 옵션이 있습니다.
키가 ID이고 색인과 일치하면 직접 액세스 할 수 있습니다.
어레이 위로 반복
[].find
사용목록을 개체로 변환하고 찾아보세요.
지도 사용
또는 findIndex
.. etc
<시간>
<시간>let id = 1 let message = messages [id -1]; message.foo = 'bar';
<시간>let prop = 'name', key = 'name1' for (const message of messages) if (message[prop] === key) message.foo = 'bar'
<시간>const byProp = (prop,key) => ({[prop]:k}) => k == key const message = messages.find (byProp('name', 'name1'))
const byProp = (arr,prop) => arr.reduce ((obj, itm) => ({...obj, [itm[prop]]:itm}),{}) let message = byProp (messages, 'name')['name1']
- 답변 # 3
작동해야합니다
const newMsg = { id: 10, message: 'hi' } this.setState(({ messages } => { return { ...messages.filter(x => x.id !== newMsg.id), newMsg } };
- 답변 # 4
Array.map
사용 배열을 수정하려면const messages = [ {id: 1, name: 'name1'}, {id: 2, name: 'name2'}, ] const updateById = obj => { const { id } = obj; // here we check if new object has the same id as the old one // we replace old one with new return messages.map(message => message.id === id ? obj : message) } console.log( updateById({id: 1, name: 'newName'}) )
- 답변 # 5
여러 가지 방법이 있습니다. 그중 하나가 아래와 같습니다.
let x = [{id: 1, a: 1},{id: 2, b: 2}] let newO = {id: 2, b: 3} let y =[ ...x.map(item => { if (item.id === newO.id) { return newO; } else return item }) ] console.log(y)
관련 자료
- javascript - React의 while 루프 내부에서 State를 어떻게 업데이트합니까?
- reactjs - 업데이트 상태를 동 기적으로 반응
- javascript - 체크 박스의 상태 지연 업데이트, React
- reactjs - React Hooks를 사용하여 객체로 상태 업데이트
- javascript - 후크에서 반응에서 상태를 올바르게 업데이트하는 방법은 무엇입니까?
- reactjs - 변수 이전 값에 따라 useState 업데이트에 반응
- reactjs - axiosget 메서드를 사용하여 react에서 상태를 업데이트하려면 어떻게해야합니까?
- reactjs - React Native는 상태를 업데이트하지 않습니다
- javascript - React, 현재 상태를 기반으로 상태를 설정할 수 없음 (한 단계 뒤의 상태)
- javascript - JSON 데이터로 업데이트 상태 변수 반응
- javascript - API 호출을 기반으로 반응 js에서 상태를 변경하지 않는 버튼
- reactjs - 데이터를 가져올 때와 상태를 업데이트 할 때
- javascript - React useEffect는 함수 변수를 업데이트 할 수 없습니다
- reactjs - redux에서 상태를 업데이트하지 않는 반응
- t sql - 다른 테이블의 열을 기반으로 테이블의 한 열을 업데이트하는 쿼리
- javascript - React Hooks에서 상태 객체 내부에 객체 키를 설정하는 방법
- reactjs - 반응 변경 상태 다음 구성 요소
- javascript - React Hooks State가 처음 업데이트되지 않습니다
- reactjs - React useState는 병합하는 대신 상태 객체를 덮어 씁니다
- javascript - 반응 상태 호출
관련 질문
- javascript : 객체 배열 복사 및 새 속성 추가에 대한 구문 설명
- javascript : parentId로 객체 배열 주문
- javascript : 키로 사전 배열 내부 필터링
- javascript : 자바 스크립트를 사용하여 첫 글자를 대문자로 바꾸는 방법은 무엇입니까? 각 단어의 첫 글자
- javascript : JS의 생성기에서 join() 호출
- javascript : 경고: React가 이미 렌더링 중일 때 업데이트를 플러시할 수 없습니다.
- javascript : Mui V5 -TreeView 축소/확장 아이콘 및 TreeItem 들여쓰기 제거
- javascript : 내 redux 저장소의 상태를 적절하게 변경하지 않습니다.
- javascript : 반응 제품에 대한 설명 표시
- javascript : React JS에서 map 메소드를 사용하여 배열 데이터를 인쇄하는 방법은 무엇입니까?
findIndex
를 사용할 수 있습니다 업데이트하려는 객체의 색인을 가져 와서 새 배열의 새 객체로 바꾸고 구성 요소 상태로 설정합니다.예