如何在 React JS 中顯示這個 JSON 數據？

Question

我正在使用 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;

它工作正常，並為我帶來了我請求的元素，但我無法輸入前一個元素，我非常確定如何做到。

Answer 1

需要注意的是， Detalles是一個數組，即使它只有一個元素。 因此，如果您知道它始終只有一個元素，那么您可以使用Detalles[0].productos.Descripcion訪問它，但循環或映射數組會更安全。