开发者问题收集

Reactjs fetch 不断调用 api

2019-07-19
3971
javascript reactjs

我正在尝试使用 react fetch 函数从服务器获取数据，但它对 API 进行了无休止的调用

我从 API 返回一个数组，它只需要一个 API 调用，但 fetch() 无论端点如何都会进行无休止的调用。 

    function Posts(){
  const classes = useStyles();
  const [data, setData] = useState({posts : [{
    title : ''
  }]});

fetch('https://jsonplaceholder.typicode.com/posts')
.then( res => res.json())
.then( data => {
    setData({posts: data})
})

  return(
    <Container className={classes.container}>

    </Container>
  )
}

我希望它只进行一次或两次调用，这样它就不会向服务器发送垃圾邮件。

2个回答

为确保只进行一次 API 调用，请在组件的 componentDidMount() 生命周期方法中调用 fetch 函数。

componentDidMount() 方法在组件安装到 DOM 后调用，并且在组件的生命周期中只调用一次。 然后，您还可以使用 setState() 方法将接收到的数据设置到您的状态中。

检查以下代码， 

class A extends Component{
   componentDidMount() {
     fetch('https://jsonplaceholder.typicode.com/posts')
     .then( res => res.json())
     .then( data => {
        this.setState({posts: data})
     })
   }

   render() {
    // your code
   }
}

注意：在 render() 方法中调用 setState() 可能会导致组件重新渲染，从而无限循环执行。

如果您使用的是功能组件，则在安装组件时只能使用 useEffect() 来获取数据一次。检查 ReactJS：如何仅调用 useEffect hook 一次来获取 API 数据

Hetal Rachh
2019-07-19
import React, {useState, useEffect} from 'react';

将 fetch 包装在 useEffect() 内解决了该问题， 

function Posts(){
  const classes = useStyles();
  const [data, setData] = useState({posts : [{
    title : ''
  }]});


  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then( res => res.json())
    .then( data => {
        setData({posts: data})
    })
  }, []);

useEffect() 仅在渲染之后，我们也可以选择在任何值发生变化时运行它。

Udit
2019-07-19