如何从 URL 获取 JSON 并将其传递给 const 以做出反应？答案

【问题标题】：How can I fetch JSON from an URL and pass it to a const in react?如何从 URL 获取 JSON 并将其传递给 const 以做出反应？
【发布时间】：2021-03-06 15:09:27
【问题描述】：

我正在尝试 react-table 并且对一般反应非常陌生。现在，在下面的代码中，本地 JSON(MOCK_DATA.json) 被传递到 const 数据中。我想用从 URL 获取的数据替换本地 JSON。我怎样才能做到这一点？谢谢你:)

import React, { useMemo } from 'react'
import { useTable, useFilters, useGlobalFilter, usePagination, useSortBy } from 'react-table'
import MOCK_DATA from './MOCK_DATA.json'
import { COLUMNS } from './columns'
import { GlobalFilter } from './GlobalFilter'
import { ColumnFilter } from './ColumnFilter'

export const FilteringTable = () => {
  const columns = useMemo(() => COLUMNS, [])
  const data = useMemo(() => MOCK_DATA, [])
...
}

【问题讨论】：

标签： javascript json reactjs fetch react-table

【解决方案1】：

您可以使用 http 库/js API 并将响应设置为反应状态。最简单的是fetch

const [data, setData] = React.useState();
     

 fetch('http://example.com/movies.json')
      .then(response => response.json())
      .then(data => setData(data));

或者，您可以使用axios，这也很棒，也是我个人的最爱。

请注意，上面的示例仅适用于功能组件。如果您打算使用类组件，请使用 this.setState() API。您希望何时触发对后端服务器的 API 调用取决于您的用例。最常见的用例是在页面加载时获取数据。所以你的应用看起来像。

function App(){
const [data, setData] = React.useState({}); //setting it to empty map as default
React.useEffect(() => {
 fetch('http://your-api/')
      .then(response => setData(response.json())) //setting the response in our data object
      .then(data => console.log(data));
},[]) //called when page is loaded for first time
return (<Table data = {data}/>) // when data is fetched, react re renders the table component since value of data changes.
}

【讨论】：

【解决方案2】：

您可以使用Fetch api 获取数据并使用useState 挂钩将数据返回到状态。

也许此链接可为您进一步研究该主题提供一些见解。

https://www.youtube.com/watch?v=T3Px88x_PsA&t=1s（YouTube），
https://blog.logrocket.com/patterns-for-data-fetching-in-react-981ced7e5c56/（某篇文章）

【讨论】：