如何遍历其中包含数组、对象和字符串的对象

Question

我正在尝试通过遍历对象来显示 Card 中的数据：

如果值是 String，它必须显示在 <p> 标签中。
如果值为 Array，则它必须显示在 table.
如果值是一个对象，它必须再次显示在卡片中。

下面的代码仅将 value1 显示为检查字符串 returns 值和 for 循环停止 there.Is 的 if 语句，我可以通过任何方式执行上面提到的操作通过循环获取所有类型？

import React, { Component } from 'react';
import { Card, Table } from "react-bootstrap";

const obj1 = {
    "title1": "value1",
    "title2": ["value2", "value3", "value4"],
    "title3": {
    "title4": "value5",
    "title5": "value6"
    }
    };

class Parse extends Component {

    parseHandler = (data) => {
        let arr = Object.values(data);
        for(let i in arr) {
            if (typeof arr[i] === 'object' && !Array.isArray(arr[i])) {
                return (
                    Object.values(arr[i]).map(arrData => {
                        return (
                            <Card>
                                <Card.Body>
                                    <p>{arrData}</p>
                                </Card.Body>
                            </Card>
                        )
                    })
                )
            } if(Array.isArray(arr[i])) {
                return (
                arr[i].map(arrData2 => {
                    return (
                        <Table>
                            <tr>
                                <td>{arrData2}</td>
                            </tr>
                        </Table>
                        )
                    }    
                ))
            } if(typeof arr[i] === 'string') {
                return (
                    <p>{arr[i]}</p>
                )
            }
        }
    }

    render() { 
        return ( 
            <Card>
                {this.parseHandler(obj1)}
            </Card>
         );
    }
}
 
export default Parse;

Answer 1

在 for 循环中添加 return 语句时，它会中断循环。鉴于您的代码实现，您可能想要创建一个 content 数组。您会将值推送到数组。最后你会 return 数组：

parseHandler = (data) => {
  const arr = Object.values(data);
  const content = [];
  for(let i in arr) {
      if (typeof arr[i] === 'object' && !Array.isArray(arr[i])) {
          content.push(
              Object.values(arr[i]).map(arrData => {
                  return (
                      <Card>
                          <Card.Body>
                              <p>{arrData}</p>
                          </Card.Body>
                      </Card>
                  )
              })
          )
      }else if(Array.isArray(arr[i])) {
          content.push(
          arr[i].map(arrData2 => {
              return (
                  <Table>
                      <tr>
                          <td>{arrData2}</td>
                      </tr>
                  </Table>
                  )
              }    
          ))
      }else if(typeof arr[i] === 'string') {
          content.push(
              <p>{arr[i]}</p>
          )
      }
  }
  return content
}

Answer 2

一个数组是 typeof 'object'。您应该使用 Array.isArray(arr[i]) that return true 或 false 来知道它是数组还是对象。

如何遍历其中包含数组、对象和字符串的对象

How to Iterate through an Object which has an array, object and string in it

javascript

reactjs

nested-for-loop