반응 애플리케이션에서 중첩된 JSON 데이터 패치하기

중첩된 JSON 데이터 패치

JSON 데이터로 작업하는 것은 까다로울 수 있으며 중첩 데이터로 작업하는 경우에는 더욱 까다로울 수 있습니다. 사이트의 게시물에 대한 JSON 데이터로 작업 중이고 각 게시물에 중첩된 댓글 배열이 있다고 가정해 보겠습니다.

{
  "posts": [
    {
      "id": 1,
      "title": "React 101",
      "subhead": "Some basics to get you started with React",
      "body": "React apps are build using components. These components are used to give you flexibility when writing code.",
      "user": "test",
      "comments": [
        {
          "id": 1,
          "text": "this is really good",
          "username": "Jose Ramirez"
        },
        {
          "id": 2,
          "text": "very helpful!",
          "username": "Jane Smith"
        }
      ]
    },
    {
      "id": 2,
      "title": "Using JSX",
      "subhead": "JSX basics",
      "body": "When writing your markup in react, you write it in JSX. This is very similar to HTML, but with some key differences. One difference to keep in mind is that JSX things expect a prop of className rather than class.",
      "user": "test",
      "comments": [
        {
          "id": 1,
          "text": "This is great.",
          "username": "John Doe"
        },
        {
          "id": 2,
          "text": "Thanks for this!",
          "username": "Kareena Bhatt"
        }
      ]
    },

귀하의 목표는 주석을 패치하는 것입니다. 이와 같이 중첩된 데이터로 작업할 때 데이터가 어디로 가야 하는지 알 수 있도록 "주석"키를 전달할 수 있습니다. 값의 경우 먼저 이전의 모든 주석을 가리키는 값이 있는 배열을 전달한 다음 새 데이터와 함께 객체를 전달할 수 있습니다. 이를 달성하려는 경우 제출 기능은 다음과 같습니다.

function onSubmit(e){
        e.preventDefault()
        const newComment = {
            "comments": [
                ...allComments,
                {"text": commentText,
                "id": (commentCountRef.current),
                "username": (user.given_name + " " + user.family_name)}
            ]
        }
        fetch(`http://localhost:3004/posts/${post.id}`, {
            method: "PATCH",
            headers: {
                "Content-Type": "application/json"
        },
        body: JSON.stringify(newComment)
        })
        .then((r) => r.json())
        .then((commentData) => setAllComments(commentData.comments))
        commentCountRef.current += 1
}

그런 다음 모든 주석 데이터로 allComments 상태를 설정합니다. 이는 이 JSON 요청이 가져오는 전체 게시물 개체를 반환하기 때문입니다.

useRef 후크를 활용하여 id 값 가져오기

이와 같은 데이터를 처리할 때 또 다른 까다로운 점은 데이터에 올바른 ID 값을 할당하는 것입니다. 이를 수행하는 방법에는 여러 가지가 있지만 useRef 후크는 유용한 도구가 될 수 있으며 추가 패키지를 가져오지 않고도 이를 수행할 수 있습니다. 올바른 id 값을 할당하기 위해 useRef 후크가 어떻게 사용되었는지 분석해 보겠습니다.

애플리케이션에 useRef 후크를 가져오고 현재 주석을 상태로 설정하면 useRef 후크를 설정하여 주석 배열의 길이 값을 보유하고 여기에 하나를 추가하여 다음 id 값과 동일하게 할 수 있습니다. .

    const commentCountRef = useRef(post.comments.length + 1)

위에서 볼 수 있듯이 이것은 객체에 id로 전달됩니다. 이제 새 개체의 ID를 설정하고 새 댓글이 제출될 때 프런트 엔드 및 백엔드 기술이 모두 업데이트되도록 댓글을 설정할 수 있습니다.