Javascript 如何在React JS中显示此JSON数据？

我正在使用Fetch发布一个端点，该端点返回以下答案：

{ 
"movimientos": [
        {
            "Estado": 1,
            "_id": "5e31ee4310ec6117387548a2",
            "usuarios": "5e262750803c451ca4a27c36",
            "empresas": {
                "_id": "5e2f4c3ef80d8246f0e545d8",
                "Nombre_Empresa": "ING. Y HER. S.A."
            },
            "Tipo_Documento": "AF",
            "Numero_Documento": "2",
            "Bodega_Origen": {
                "_id": "5e2619ccbb29d71aa8455cad",
                "Descripcion": "BODEGA PRINCIPAL"
            },
            "Bodega_Destino": {
                "_id": "5e2629f110b9f32d10524ca5",
                "Descripcion": "BODEGA Obra parma"
            },
            "Responsable": "Mauricio",
            "Estado_Documento": "PR",
            "Observaciones": "",
            "Detalles": [
                {
                    "_id": "5e31ee4c10ec6117387548a3",
                    "productos": {
                        "_id": "5e29c1f6bc44ee37687cd976",
                        "Descripcion": "MINICARGADOR No2"
                    }
                }
            ],
            "Fecha_Creacion": "2020-01-29T20:42:43.535Z"
        }
    ]
}

到目前为止，我没有任何问题试图通过答案将其发送到视图中的基本表。我毫无问题地展示了所有元素。但是我必须访问这个项目

"Detalles": [
                {
                    "_id": "5e31ee4c10ec6117387548a3",
                    "productos": {
                        "_id": "5e29c1f6bc44ee37687cd976",
                        "Descripcion": "MINICARGADOR No2"
                    }
                }
            ]

特别是产品中“描述”的价值。我有一个简单的组件，负责发出请求和显示数据。代码如下：

class Movimientos extends Component{
    state = {movimientos: {}}


    componentDidMount () {


            const empresa = {
                _id: '5e2f4c3ef80d8246f0e545d8'
            };

            const options = {
                method: 'POST', 
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(empresa)
            }

            fetch('http://localhost:3000/api/movimiento/mostrarMovimientosweb', options
            ).then((res) => res.json())
            .then((data) => { 
                const {movimientos} = data
                this.setState({movimientos})
            })
            .catch((err)=>console.log(err))
    }

    /*
      "Numero_Documento": "1",
      "Responsable": "Mauricio",
            "Estado_Documento": "PR",
            "Observaciones": "Mas una llanta de repuesto",

    */ 



    renderMovimientos() {
        const {movimientos} = this.state

        return(
            <table class="table">
  <thead>
    <tr>
      <th><abbr title="Position">Numero documento</abbr></th>
      <th>Bodega origen</th>
      <th><abbr title="Played">Bodega destino</abbr></th>
      <th><abbr title="Won">Responsable</abbr></th>
      <th><abbr title="Drawn">Estado documento</abbr></th>
      <th><abbr title="Lost">Observaciones</abbr></th>
    </tr>
  </thead>
  <tfoot>
    <tr>
    <th><abbr title="Position">Numero documento</abbr></th>
      <th>Bodega origen</th>
      <th><abbr title="Played">Bodega destino</abbr></th>
      <th><abbr title="Won">Responsable</abbr></th>
      <th><abbr title="Drawn">Estado documento</abbr></th>
      <th><abbr title="Lost">Observaciones</abbr></th>
      <th><abbr title="Lost">Maquina</abbr></th>
    </tr>
  </tfoot>
  <tbody>
  {Object.keys(movimientos).map (datos => {
                 return (
                 <tr key={datos}>
                   <td> {movimientos[datos].Numero_Documento}</td>
                   <td>{movimientos[datos].Bodega_Origen.Descripcion}</td>
                   <td>{movimientos[datos].Bodega_Destino.Descripcion}</td>
                   <td>{movimientos[datos].Responsable}</td>
                   <td>{movimientos[datos].Estado_Documento}</td>
                   <td>{movimientos[datos].Observaciones}</td>
                   <td>{movimientos[datos].Observaciones}</td>
                 </tr>
                 )})}   
  </tbody>
</table>


          ) 
    }

    render (){
        return (
            <div>
               {this.renderMovimientos()}
            </div>
        )
    }

}

export default Movimientos;

类movimintos扩展组件{
状态={movimintos:{}
组件安装（）{
常数empresa={
_id:'5e2f4c3ef80d8246f0e545d8'
};
常量选项={
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify（empresa）
}
取（'http://localhost:3000/api/movimiento/mostrarMovimientosweb，选项
).然后（（res）=>res.json（））
.然后（（数据）=>{
常量{movimintos}=数据
this.setState（{moviminentos}）
})
.catch（（err）=>console.log（err））
}
/*
“数字文件”：“1”，
“负责任的”：“毛里西奥”，
“Estado_Documento”：“PR”，
“观察者”：“我们的祖国”，
*/ 
renderMovimientos（）{
const{movimintos}=this.state
返回(
数字文件
奥里根酒庄
德斯蒂诺酒庄
责任的
埃斯塔多文件
观察者
数字文件
奥里根酒庄
德斯蒂诺酒庄
责任的
埃斯塔多文件
观察者
马奎纳
{Object.keys（movimintos.map）（datos=>{
返回(
{movimintos[datos].Numero_Documento}
{Movimintos[datos].Bodega_Origen.Description}
{movimintos[datos].Bodega_Destino.descripion}
{movimintos[datos].responsible}
{movimintos[datos].Estado_Documento}
{movimintos[datos].Observaciones}
{movimintos[datos].Observaciones}
)})}   
) 
}
渲染（）{
返回(
{this.rendermovimentos（）}
)
}
}
导出默认动作；

---

它工作正常，并为我带来了我请求的元素，但我无法输入上一个元素，我非常确定如何输入。

需要注意的是，

Detalles

是一个数组，即使它只有一个元素。因此，如果您知道它总是有一个元素，那么您可以使用

Detalles[0].productos.description

访问它，但是循环或映射数组会更安全。

如果这个答案有帮助，请确保我不太确定如何在元素内部创建映射。我发现以下错误对象作为React子对象无效（找到：具有键{u id，productos}）Detalles.map（函数（detalle）{console.log（detalle.productos.descrippcion）；//对每个潜在的detalle}执行其他操作）；