无法在嵌套地图中返回 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":{}}