如何使用 React.js 和复杂的 JSON 对象

2020-07-31 08:00:00 · 飞浪

介绍前端开发人员的关键任务之一是将后端API集成到应用程序中。现代API广泛遵循RESTful架构，其中端点从客户端接收请求并返回响应，而不管客户端是什么。GETAPI或端点仅用于使用

介绍

前端开发人员的关键任务之一是将后端 API 集成到应用程序中。现代 API 广泛遵循RESTful架构，其中端点从客户端接收请求并返回响应，而不管客户端是什么。GET API或端点仅用于使用称为JSON（JavaScript 对象表示法）的流行数据格式从服务器检索数据。它们通常返回具有深度嵌套对象和数组的复杂 JSON 对象。

本指南旨在解释如何从 React 应用程序中的复杂 JSON 对象检索相关信息并将该数据存储在状态中，或在需要时将其作为 props 传递下去。

应用程序概述和设置

本指南中的示例将构建一个小型 React 应用，该应用通过将复杂的 JSON 对象分解为简单的对象和数组来使用端点https://reqres.in/api/unknown。整个数据集由父组件获取和存储，然后分解为两个单独的对象。一个对象作为 props 传递给子组件，子组件向用户显示该对象中包含的信息。

通过运行创建一个空白的反应项目：

      npx create-react-app react-complex-json-app

安装 Axios，这是一个与 React 配合使用以进行 HTTP 调用的第三方库。

      npm install axios

创建组件样板

创建两个简单的组件开始。首先是Colors组件：

      import React from 'react';

const Colors=()=>{
    return(
        <>
            <h1>This is Colors component</h1>
        </>
    )
}
export default Colors;
    

现在创建Home组件并在其中渲染Colors组件，如下所示。

      import React from 'react';
import Colors from './Colors';

const Home=()=>{
    return(
        <>
            <h1>This is home component</h1>
            <Colors/>
        </>
    )
}

export default Home;
    

最后，在App.js中渲染Home组件。

      import React from 'react';
import './App.css';
import Home from './Components/Home';

function App() {
  return (
    <div className="App">
      <h2>React JSON</h2>
      <Home/>
    </div>
  );
}

export default App;
    

请求复杂的 JSON

考虑以下向 REST API发出GET请求的代码。

      import React,{useEffect,useState} from 'react';
import Colors from './Colors';
import axios from 'axios';

const Home=()=>{
    useEffect(()=>{
        axios.get('https://reqres.in/api/unknown')
            .then(res=>{
                console.log(res)
            })
            .catch(err=>{
                console.log(err);
            })
    },[])
    return(
        <>
            <h1>{Data.Company}</h1>
            <p>{Data.Description}</p>
            <Colors/>
        </>
    )
}

export default Home;
    

分析复杂 JSON 对象

JSON 响应本身包含大量不必要的信息（例如config、headers等），并在数据对象内返回所有相关信息。此数据对象包含用户可能感兴趣的实际数据。分析和分解复杂 JSON 响应的一个好而简单的做法是使用控制台语句查看附加到对象的属性，如下所示。

      useEffect(()=>{
        axios.get('https://reqres.in/api/unknown')
            .then(res=>{
                console.log('Response from main API: ',res)
                console.log('Home Data: ',res.data.ad)          
                console.log('Colors Data: ',res.data.data)
            })
            .catch(err=>{
                console.log(err);
            })
    },[])
    

数据对象包含两个作为属性附加的相关对象：data和ad。广告对象应该由Home组件使用，用于显示公司名称及其座右铭。

      company: "StatusCode Weekly"
text: "A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."
url: "http://statuscode.org/"
    

数据对象是一个对象数组，其中每个对象包含有关特定颜色的详细信息。

{id: 1, name: "cerulean", year: 2000, color: "#98B2D1", pantone_value: "15-4020"}
{id: 2, name: "fuchsia rose", year: 2001, color: "#C74375", pantone_value: "17-2031"}
{id: 3, name: "true red", year: 2002, color: "#BF1932", pantone_value: "19-1664"}
{id: 4, name: "aqua sky", year: 2003, color: "#7BC4C4", pantone_value: "14-4811"}
{id: 5, name: "tigerlily", year: 2004, color: "#E2583E", pantone_value: "17-1456"}
{id: 6, name: "blue turquoise", year: 2005, color: "#53B0AE", pantone_value: "15-5217"}
    

使用复杂 JSON 响应中的数据

首先，创建一些状态变量来存储整个数据。状态变量Data存储必须在Home组件上显示的详细信息，colorsData存储必须在Colors组件上显示的详细信息

      const [Data,setData]=useState({
    Company:'',
    Description:''
})
const [colorsData,setColorsData]=useState([])
    

使用 API 调用的.then()方法内的数据填充这些变量。

      useEffect(()=>{
    axios.get('https://reqres.in/api/unknown')
        .then(res=>{

            let companyData=res.data.ad;

            setData({Company:companyData.company,Description:companyData.text})
            setColorsData(res.data.data)
        })
        .catch(err=>{
            console.log(err);
        })
},[])
    

从Home组件内部的companyData输出数据：

      return(
    <>
        <h1>{Data.Company}</h1>
        <p>{Data.Description}</p>
        <Colors data={colorsData}/>
    </>
    

最终代码

现在让我们用上面讨论的完整代码来总结本指南。

主页组件

下面演示了Home组件的最终代码。

      import React,{useEffect,useState} from 

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何使用 React.js 和复杂的 JSON 对象

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; import Colors from './Colors'; const Home=()=>{ return( <> <h1>This is home component</h1> <Colors/> </> ) } export default Home;

import React from 'react'; import './App.css'; import Home from './Components/Home'; function App() { return ( <div className="App"> <h2>React JSON</h2> <Home/> </div> ); } export default App;

import React,{useEffect,useState} from 'react'; import Colors from './Colors'; import axios from 'axios'; const Home=()=>{ useEffect(()=>{ axios.get('https://reqres.in/api/unknown') .then(res=>{ console.log(res) }) .catch(err=>{ console.log(err); }) },[]) return( <> <h1>{Data.Company}</h1> <p>{Data.Description}</p> <Colors/> </> ) } export default Home;

useEffect(()=>{ axios.get('https://reqres.in/api/unknown') .then(res=>{ console.log('Response from main API: ',res) console.log('Home Data: ',res.data.ad) console.log('Colors Data: ',res.data.data) }) .catch(err=>{ console.log(err); }) },[])

company: "StatusCode Weekly" text: "A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things." url: "http://statuscode.org/"

0: {id: 1, name: "cerulean", year: 2000, color: "#98B2D1", pantone_value: "15-4020"} 1: {id: 2, name: "fuchsia rose", year: 2001, color: "#C74375", pantone_value: "17-2031"} 2: {id: 3, name: "true red", year: 2002, color: "#BF1932", pantone_value: "19-1664"} 3: {id: 4, name: "aqua sky", year: 2003, color: "#7BC4C4", pantone_value: "14-4811"} 4: {id: 5, name: "tigerlily", year: 2004, color: "#E2583E", pantone_value: "17-1456"} 5: {id: 6, name: "blue turquoise", year: 2005, color: "#53B0AE", pantone_value: "15-5217"}

useEffect(()=>{ axios.get('https://reqres.in/api/unknown') .then(res=>{ let companyData=res.data.ad; setData({Company:companyData.company,Description:companyData.text}) setColorsData(res.data.data) }) .catch(err=>{ console.log(err); }) },[])