>source

복잡한 배열이 객체를 채웠습니다. (아래 그림 참조)

const privateMessages= Array [
  Object {
    "_id": "607533d511a2301b204720ed",
    "chat": Array [
      Object {
        "_id": "6098ffd30a2f4287f92be018",
        "createdAt": "2021-05-10T09:41:39.683Z",
        "text": "G",
        "user": Object {
          "_id": "60716a38136f970ba4a0526e",
        },
      },
      Object {
        "_id": "6097b6e69f98cbf5ba6deaf8",
        "createdAt": "2021-05-09T10:18:36.972Z",
        "text": "ত",
        "user": Object {
          "_id": "60716f7cf3a75846ee1f5d38",
        },
      },
      Object {
        "_id": "6097b6aacd62683ba317965d",
        "createdAt": "2021-05-09T10:17:36.182Z",
        "text": "H",
        "user": Object {
          "_id": "60716a38136f970ba4a0526e",
        },
      }
    ],
    "pair": Array [
      Object {
        "_id": "60716a38136f970ba4a0526e",
        "firstName": "Sayan",
        "lastName": "Biswas",
      },
    ],
  },
]

SetState Hook을 사용하여 업데이트하기가 어렵습니다. 그래서 Force Update를 사용하여 구성 요소를 다시 렌더링하지 않도록 결정했습니다. 주 상태를 업데이트하는 방법은 아래에 나와 있습니다.

privateMessages.forEach((i)=> {
                    if (i.pair[0]._id== data.sender) {
                        i.chat.unshift(data.chatObj)
                    }
                })

이것은 내가 사용하고있는 힘 훅이됩니다.

function useForceUpdate() {
    const [value, setValue]= useState(0); //integer state
    return ()=> setValue(value=> value + 1); //update the state to force render
}

내가 그것을 부르는 방식

const forceUpdate= useForceUpdate()

저는 프로젝트의 다른 부분에있는 동일한 힘 업데이트 () 후크를 사용하고 있지만 아래에 주어진 중첩 된지도 함수로 왜 작동하지 않는 이유는 무엇인지 알지 못합니다.

return (<View>        <ScrollView >            {
                privateMessages.map(
                    (i)=> i.pair.map(
                        (j)=> {
                            return (
                                <>                                    <TouchableOpacity
                                        key={j._id}
                                        onPress={()=> {
                                            navigation.navigate("PrivateConversation", {
                                                chats: i.chat,
                                                userId: userId,
                                                socket: socket,
                                                name: j.firstName,
                                                recieverId: j._id
                                            })
                                        }
                                        } >                                        <Text key={j._id} >{j.firstName + ' ' + j.lastName}</Text>                                    </TouchableOpacity>                                </>                            )
                        }
                    )
                )
            }
        </ScrollView>    </View>)

전체 code : -

import React, { useState, useEffect, useContext } from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage"
import API from '../api.js'
import { useNavigation } from '@react-navigation/native';
import { SocketObj } from "./Main"
function useForceUpdate() {
    const [value, setValue]= useState(0); //integer state
    return ()=> setValue(value=> value + 1); //update the state to force render
}
const ChatScreen= ()=> {
    const navigation= useNavigation()
    let socket= useContext(SocketObj)
    let [privateMessages, setPrivateMessages]= useState([])
    let [userId, setUserId]= useState('')
    const forceUpdate= useForceUpdate()
    useEffect(
        ()=> {
            const fetchData= async ()=> {
                try {
                    const response= await API.get('get/chats', {
                        headers: {
                            'Content-Type': 'application/json',
                            "auth-token": await AsyncStorage.getItem("token")
                        }
                    })
                    setPrivateMessages(response.data.chatFriends)
                    setUserId(response.data.userId)
                } catch (err) {
                    console.log(err.response)
                }
            }
            fetchData()
            socket.on("recieve-private-message", (data)=> {
                privateMessages.forEach((i)=> {
                    if (i.pair[0]._id== data.sender) {
                        i.chat.unshift(data.chatObj)
                    }
                })
                forceUpdate()
            })
        }, []
    )
    useEffect(
        ()=> {
            console.log("changed")
        },[privateMessages]
    )
    return (<View>        <ScrollView >            {
                privateMessages.map(
                    (i)=> i.pair.map(
                        (j)=> {
                            return (
                                <>                                    <TouchableOpacity
                                        key={j._id}
                                        onPress={()=> {
                                            navigation.navigate("PrivateConversation", {
                                                chats: i.chat,
                                                userId: userId,
                                                socket: socket,
                                                name: j.firstName,
                                                recieverId: j._id
                                            })
                                        }
                                        } >                                        <Text key={j._id} >{j.firstName + ' ' + j.lastName}</Text>                                    </TouchableOpacity>                                </>                            )
                        }
                    )
                )
            }
        </ScrollView>    </View>)
}
export default ChatScreen

  • 이전 Python : TypeError : 해싱 전에 유니 code 객체를 인코딩해야합니다.
  • 다음 arrays : 루프를 사용하여 두 개의 배열을 추가하고 있습니다. 제 2 배열의 첫 번째 요소 만 1 차 배열의 모든 요소에 추가됩니다. 루프가 반복되지 않습니다