{"id":17673,"date":"2024-03-15T15:28:46","date_gmt":"2024-03-15T15:28:46","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/"},"modified":"2024-03-21T11:28:02","modified_gmt":"2024-03-21T11:28:02","slug":"how-to-interact-with-backend-data-in-react","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/","title":{"rendered":"How to interact with backend data in React?"},"content":{"rendered":"<p>In React, interacting with backend data typically involves the following steps:<\/p>\n<ol>\n<li>Initiate a network request: Use libraries such as fetch or axios to send HTTP requests to backend API interfaces.<\/li>\n<li>Handle response: Processing the data returned from the backend in the component. You can use the then and catch methods to handle successful and failed responses. In the then method, you can store the returned data in the component&#8217;s state for use or rendering in the component.<\/li>\n<li>Update component state: Store the data returned by the backend in the component&#8217;s state, and use the setState method to update the component&#8217;s state. After updating the state, React will re-render the component.<\/li>\n<li>Render data: Render data to the page using JSX syntax in the render method based on the component&#8217;s state.<\/li>\n<\/ol>\n<p>Here is a simple example:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useState, useEffect } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'axios'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">MyComponent<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">const<\/span> [data, setData] = <span class=\"hljs-title function_\">useState<\/span>([]);\r\n\r\n  <span class=\"hljs-title function_\">useEffect<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {\r\n    axios.<span class=\"hljs-title function_\">get<\/span>(<span class=\"hljs-string\">'\/api\/data'<\/span>) <span class=\"hljs-comment\">\/\/ \u53d1\u8d77GET\u8bf7\u6c42\u5230\u540e\u7aefAPI<\/span>\r\n      .<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">response<\/span> =&gt;<\/span> {\r\n        <span class=\"hljs-title function_\">setData<\/span>(response.<span class=\"hljs-property\">data<\/span>); <span class=\"hljs-comment\">\/\/ \u5c06\u540e\u7aef\u8fd4\u56de\u7684\u6570\u636e\u5b58\u50a8\u5230\u7ec4\u4ef6\u72b6\u6001\u4e2d<\/span>\r\n      })\r\n      .<span class=\"hljs-title function_\">catch<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">error<\/span> =&gt;<\/span> {\r\n        <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">error<\/span>(error);\r\n      });\r\n  }, []);\r\n\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n      {data.map(item =&gt; (\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span>&gt;<\/span>{item.name}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span> \/\/ \u6e32\u67d3\u6570\u636e\u5230\u9875\u9762\u4e0a\r\n      ))}\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\r\n  );\r\n};\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">MyComponent<\/span>;\r\n<\/code><\/pre>\n<p>Please note that in the above example, the axios library was used to make network requests. You can also use other network request libraries or the native fetch API to achieve the same operation. Additionally, useState and useEffect Hooks were used in the above example to manage the state and side effects of the component.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In React, interacting with backend data typically involves the following steps: Initiate a network request: Use libraries such as fetch or axios to send HTTP requests to backend API interfaces. Handle response: Processing the data returned from the backend in the component. You can use the then and catch methods to handle successful and failed [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-17673","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to interact with backend data in React? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to interact with backend data in React?\" \/>\n<meta property=\"og:description\" content=\"In React, interacting with backend data typically involves the following steps: Initiate a network request: Use libraries such as fetch or axios to send HTTP requests to backend API interfaces. Handle response: Processing the data returned from the backend in the component. You can use the then and catch methods to handle successful and failed [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T15:28:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:28:02+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin Taylor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin Taylor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/\"},\"author\":{\"name\":\"Benjamin Taylor\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\"},\"headline\":\"How to interact with backend data in React?\",\"datePublished\":\"2024-03-15T15:28:46+00:00\",\"dateModified\":\"2024-03-21T11:28:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/\"},\"wordCount\":201,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/\",\"name\":\"How to interact with backend data in React? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:28:46+00:00\",\"dateModified\":\"2024-03-21T11:28:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to interact with backend data in React?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\",\"name\":\"Benjamin Taylor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"caption\":\"Benjamin Taylor\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to interact with backend data in React? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/","og_locale":"en_US","og_type":"article","og_title":"How to interact with backend data in React?","og_description":"In React, interacting with backend data typically involves the following steps: Initiate a network request: Use libraries such as fetch or axios to send HTTP requests to backend API interfaces. Handle response: Processing the data returned from the backend in the component. You can use the then and catch methods to handle successful and failed [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:28:46+00:00","article_modified_time":"2024-03-21T11:28:02+00:00","author":"Benjamin Taylor","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Benjamin Taylor","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/"},"author":{"name":"Benjamin Taylor","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9"},"headline":"How to interact with backend data in React?","datePublished":"2024-03-15T15:28:46+00:00","dateModified":"2024-03-21T11:28:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/"},"wordCount":201,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/","name":"How to interact with backend data in React? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:28:46+00:00","dateModified":"2024-03-21T11:28:02+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-interact-with-backend-data-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to interact with backend data in React?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9","name":"Benjamin Taylor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","caption":"Benjamin Taylor"},"url":"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17673"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17673\/revisions"}],"predecessor-version":[{"id":51299,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17673\/revisions\/51299"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}