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

Question

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

Rendering:

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

Json File:

[
   {
       "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"
           }
       ]
   },

im facing issue to retrieve the data from json file Like im not able render the data so please help over this

Getting error while mapping the data

im facing issue to retrieve the data from json file Like im not able render the data so please help over this

Answer 1

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

Rendering:

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

Json File:

[
   {
       "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"
           }
       ]
   },

im facing issue to retrieve the data from json file Like im not able render the data so please help over this

Getting error while mapping the data

im facing issue to retrieve the data from json file Like im not able render the data so please help over this

Answer 2

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>)

Answer 3

The issue lies with this file: https://cdn.shopify.com/s/files/1/0455/2176/4502/files/products.json

It returns a an invalid JSON string. So when your axios gets its contents, it sets your posts variable to a simple string, which obviously cannot be mapped through. Hence the error.

The reason axios does not convert it into a JS array is because the file does not contain valid JSON to parse.

The reason the JSON in the file is invalid is because it has a trailing comma after the very last object of the array. See image:

Answer 4

The reason this isn't working for you is, result.data is a string, not an array.

You'll have to convert result.data to array with JSON.parse

Also, the json you're using has a training comma which has to be handled for JSON.parse to work

following code worked for me:

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>
  );
}