无法在嵌套地图中返回 jsx 反应 javascript答案

【问题标题】：can't return jsx in nested map react javascript无法在嵌套地图中返回 jsx 反应 javascript
【发布时间】：2020-11-11 16:59:17
【问题描述】：

我从 props 数据 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 }
</>
)

但是什么都没有返回，有谁知道有什么问题吗？当我从控制台获取日志时，我会在检查器中看到项目。

请帮帮我！

【问题讨论】：

标签： javascript reactjs nested-loops react-props

【解决方案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} />

【讨论】：

【解决方案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":{}}

【讨论】：

我需要实现 3x useState 首先 useState get props.uploadResponse ，然后第二个 useState 获得第一个 useState.response 和第三个 useStae 获得第二个 useState.data ，最后从最后一个 useState 我可以使用 map 方法并迭代通过所有项目...任何优化？