如何在反应中获取json数据？答案

【问题标题】：How to fetch json data in react?如何在反应中获取json数据？
【发布时间】：2021-05-23 19:05:18
【问题描述】：

useEffect(async () =>
{
    const fetchData = async () =>
    {
        const result = await axios("")
        setposts(result.data)
    }
    fetchData();
    
    
}, [])

渲染：

posts.map(post => <li>{post.name}</li>)

Json 文件：

[
   {
       "id": 1,
       "vendor": "Gap",
       "name": "Men's Pullover Sweatshirt",
       "image_src": ["https://cdn.shopify.com/s/files/1/0455/2176/4502/files/Sweater_0.jpg?v=1603266982"],
       "price": "74",
       "tag": "T-shirt",
       "compare_at_price": "200",
       "options": [
           {
               "id": "1010",
               "name": "Size",
               "value": "US 8"
           }, {
               "id": "1011",
               "name": "Size",
               "value": "US 9"
           }, {
               "id": "1012",
               "name": "Size",
               "value": "US 10"
           }, {
               "id": "1013",
               "name": "Size",
               "value": "US 11"
           }, {
               "id": "1014",
               "name": "Size",
               "value": "US 13"
           }
       ]
   },

我面临着从 json 文件中检索数据的问题，就像我无法渲染数据，所以请帮助解决这个问题

映射数据时出错

我面临着从 json 文件中检索数据的问题，就像我无法渲染数据，所以请帮助解决这个问题

【问题讨论】：

1.更多代码。 2. 发布错误信息。
我猜你需要获取方法来访问你的数据，比如 await axios.get(baseURL)....
@codemonkey 错误是：TypeError：posts.map 不是函数
@AhmetSuhanOka 我从 Json 获取数据我在渲染数据时遇到问题

标签： javascript json reactjs async-await axios

【解决方案1】：

这对您不起作用的原因是，result.data 是一个字符串，而不是一个数组。

您必须使用 JSON.parse 将 result.data 转换为数组

此外，您使用的 json 有一个训练逗号，必须处理它才能使 JSON.parse 工作

以下代码对我有用：

export default function App() {
  const [posts, setposts] = useState([]);
  useEffect(async () => {
    const fetchData = async () => {
      const result = await axios.get(
        "https://cdn.shopify.com/s/files/1/0455/2176/4502/files/products.json"
      );
      let regex = /\,(?!\s*?[\{\[\"\'\w])/g;
      let correct = result.data.replace(regex, "");
      setposts(JSON.parse(correct));
    };
    fetchData();
  }, []);

  return (
    <div className="App">
      {posts.map((post) => (
        <li>{post.name}</li>
      ))}
    </div>
  );
}

【讨论】：

【解决方案2】：

问题在于这个文件：https://cdn.shopify.com/s/files/1/0455/2176/4502/files/products.json

它返回一个无效的 JSON 字符串。因此，当您的 axios 获取其内容时，它会将您的 posts 变量设置为一个简单的字符串，显然无法通过该字符串进行映射。因此出现错误。

axios之所以没有将其转成JS数组是因为该文件不包含有效的JSON来解析。

文件中的 JSON 无效的原因是它在数组的最后一个对象之后有一个尾随逗号。见图片：

【讨论】：

有什么解决办法吗？

【解决方案3】：

useEffect(() =>
{
    const fetchData = async () =>
    {
        const result = await axios.get("https://cdn.shopify.com/s/files/1/0455/2176/4502/files/products.json")
        setposts(result.data)
    }
    fetchData();
    
    
}, [])


posts?.map(post => <li>{post.name}</li>)

【讨论】：