無法在嵌套地圖中返回 jsx 反應 javascript

Question

我從道具數據 json 收到這樣的：

uploadResponse:{
        request:{
            DONE:3,
            LOADING:2,
            HEADERS_RECEIVED:1
        },
        response:{
            config:{
                alive:true
            },
            data:{
                crs:"65",
                message_number_1:"content of message 1",    
                message_number_2:"content of message 2",    
                message_number_3:"content of message 3",    
            },
            headers:{
                content_type:"type 1"
            },
            request:{
                req:1
            }
        }
    }

並想以 jsx "crs" 和 "message_number_x" 返回，然后我像這樣映射這個 JSON 對象：

return(
<>
 {props.uploadResponse !== undefined ?
                    Object.values(props.uploadResponse).map((response) => {
                        return(
                            <>
                                {Object.values(response).map((data) => {
                                    return(
                                        <>
                                            {Object.values(data).map((item) => {
                                                return(
                                                    <>
                                                        {item}
                                                        </>
                                                )
                                            })}
                                            </>
                                    )
                                })}
                                </>
                        )
                    }) : null }
</>
)

但沒有什么是回報，有人知道是什么問題嗎？ 當我從控制台獲取日志時，我會在檢查器中看到項目。

請幫我 ！

Answer 1

如果您提供完整的代碼示例會更容易，但並不完全清楚您的示例中 props 將具有什么價值。 我嘗試粘貼您的代碼並運行它，在我將丟失的部分粘在一起后，它實際上似乎可以工作，所以我猜您的代碼早期出現了問題，而不是渲染中的問題。 這是一個至少可以讓您的代碼工作的示例，希望它可以幫助您朝着正確的方向前進。

export default function App({ uploadResponse }) {
  if (uploadResponse === undefined) return null;
  return (
    <>
      {Object.values(uploadResponse.response.data).map((item) => item)}
    </>
  );
}

以及在何處使用該組件：

const data = {
  uploadResponse: {
    request: {
      DONE: 3,
      LOADING: 2,
      HEADERS_RECEIVED: 1
    },
    response: {
      config: {
        alive: true
      },
      data: {
        crs: "65",
        message_number_1: "content of message 1",
        message_number_2: "content of message 2",
        message_number_3: "content of message 3"
      },
      headers: {
        content_type: "type 1"
      },
      request: {
        req: 1
      }
    }
  }
};

<App uploadResponse={data.uploadResponse} />

Answer 2

當我像你的想法一樣實現這個時，我收到了 uploadResponse.response 未定義的錯誤。 當我查看控制台日志時，我看到：

props.uploadResponse: {"response":{"data":{"crs":"type","message_number_1":"#/features/1/properties: 16 schema violations found","message_number_0":"#/features/0/properties: 16 schema violations found","message_number_4":"#/features/4/properties: 16 schema violations found","message_number_3":"#/features/3/properties: 16 schema violations found","status":"false","message_number_2":"#/features/2/properties: 16 schema violations found"},"status":400,"statusText":"","headers":{"content-type":"application/json"},"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*"},"method":"post","url":"http://localhost:8080/admin_panel/upload_file","data":{},"cancelToken":{"promise":{}},"responseType":"json","withCredentials":false},"request":{}},"request":{}}