Home > Software design >  React Js Get Data with Fetch limit return
React Js Get Data with Fetch limit return

Time:02-13

I am new to React and was following a tutorial this React tutorial to get data with fetch. Why when I append it with a limit in the query it still returns 10 results?


    import React from 'react'

export default function UsersData() {
    return (
        <div>
            
        </div>
    )
}
import React, { useState, useEffect } from 'react'

export default function UsersData() {
  const [Users, fetchUsers] = useState([])

  const getData = () => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=8')
      .then((res) => res.json())
      .then((res) => {
        console.log(res)
        fetchUsers(res)
      })
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <>
      <h2>React Fetch API Example</h2>
      <ul>
        {Users.map((item, i) => {
          return <li key={i}>{item.name}</li>
        })}
      </ul>
    </>
  )
}```


CodePudding user response:

Do you mean the console in the browser? I am using VS Code. This is the output in the console in the browser. I can change that line and it seems it is cached. I am new to this. Is there something I need to restart?

0: {id: 1, name: 'Leanne Graham', username: 'Bret', email: '[email protected]', address: {…}, …}
1: {id: 2, name: 'Ervin Howell', username: 'Antonette', email: '[email protected]', address: {…}, …}
2: {id: 3, name: 'Clementine Bauch', username: 'Samantha', email: '[email protected]', address: {…}, …}
3: {id: 4, name: 'Patricia Lebsack', username: 'Karianne', email: '[email protected]', address: {…}, …}
4: {id: 5, name: 'Chelsey Dietrich', username: 'Kamren', email: '[email protected]', address: {…}, …}
5: {id: 6, name: 'Mrs. Dennis Schulist', username: 'Leopoldo_Corkery', email: '[email protected]', address: {…}, …}
6: {id: 7, name: 'Kurtis Weissnat', username: 'Elwyn.Skiles', email: '[email protected]', address: {…}, …}
7: {id: 8, name: 'Nicholas Runolfsdottir V', username: 'Maxime_Nienow', email: '[email protected]', address: {…}, …}
8: {id: 9, name: 'Glenna Reichert', username: 'Delphine', email: '[email protected]', address: {…}, …}
9: {id: 10, name: 'Clementina DuBuque', username: 'Moriah.Stanton', email: '[email protected]', address: {…}, …}
length: 10
[[Prototype]]: Array(0)````

CodePudding user response:

    var params = {
       method: 'GET',
       headers: {
          "cache-control": 'no-cache',
          pragma: 'no-cache',
         }
       };


fetch("https://jsonplaceholder.typicode.com/posts?_limit=8", params)
  .then(res => res.json())
  .then(res => {
      console.log(res)
  })

can you try like this ?

CodePudding user response:

It didn't change. I also can take this line completely out, save, and reload and it still shows the same data. Trying to get it to throw an error. Its like its not reading this file. https://jsonplaceholder.typicode.com/posts

  • Related