如何在React中渲染该对象？

如何解决如何在React中渲染该对象？

我的JSON：

{
    "id": 1,"userId": 34,"cerealId": 1,"metadata": {
        "latitude": "47.484574","longitude": "4.341844","precision": "461.43"
    },"createdAt": "2020-07-13T00:00:00.000Z","updatedAt": "2020-07-13T00:00:00.000Z"
}

我需要呈现对象“元数据”，这是我的代码：

    import React,{useState,useEffect,Fragment} from 'react';
    import {getCookie} from '../helpers/Helpers';
    import moment from 'moment';
    import { read } from './apiAdmin';
    
    
    const IndividualSample = (props) => {
    
        const token = getCookie('accessToken')  //// <-- right one
        //const Id = getCookie('token')
    
        const [order,setOrder] = useState({});
        const [error,setError] = useState(false);
    
    
        const loadSingleOrder = orderId => {
            read(orderId,token).then( data => {
                if (data.error){
                    setError(data.error)
                } else {
                    setOrder(data)
                }
            })
        }
    
        const showInput = (key,value) => {
            return (
                <div className="input-group mb-2 mr-sm-2">
                    <div className="input-group-prepend">
                        <div className="input-group-text">{key}</div>
                    </div>
                    <input type="text" value={value} className="form-control" readOnly/>
                </div>
            )
        }
    
        useEffect (() => {
            const orderId = props.match.params.orderId
            loadSingleOrder(orderId)
            
        },[props])
    
        const showSingleSample = () => {
            return (
                <div className="card mr-2 mt-2 mb-5">
                    <ul className="list-group">
                        <li className='list-group-item'>ID Sample: {order.id} </li>   
                        <li className="list-group-item">User ID: {order.userId}</li>
                        <li className="list-group-item">Cereal ID: {order.cerealId}</li>
                        <li className='list-group-item' style={{fontWeight:'bold'}}>Created At:{" "}
                                {moment(order.createdAt).locale('es').format('LL')}
                        </li>
                        <h2 className='mt-2 mb-5 text-center' >METADATA :</h2>
                        {order.data?.map((p,pIndex) => (
                            <div className='mb-4' key={pIndex} style={{padding:'20px',border:'1px solid indigo'}}>
    I need render this --->         {showInput('Latitude:',p.latitude)} 
                                    {showInput('Longitude:',p.longitude)}  
                            </div> ))}
                    </ul>
                </div>
            )
        }
    
        return(
            <>
                <h1>Soy Individual samples</h1>
                <div className='container'>
                    {showSingleSample()}
                    {JSON.stringify(order.metadata)}
                </div>
            </>
        )
    }

我可以渲染其他参数cerealId，userId等。但是由于我没有将对象作为数组接收，所以我不知道如何以正确的方式渲染它。

我只能在JSON.stringify(order.metadata)中看到这些参数，但是我需要在div标签中渲染它们。

我无法呈现“元数据”。如果有人可以帮助我，我将不胜感激！

解决方法

metadata是一个对象，您将必须使用Object.entries（可能需要polyfill）：

{ Object.entries(order.metadata).map(([key,value]) => (
  <div>{key}: {value}</div>
))}

还要确保它是order.metadata或order.data。