在 React-hooks 中不使用 useEffect 调用 api答案

【问题标题】：Without using useEffect call api in React-hooks在 React-hooks 中不使用 useEffect 调用 api
【发布时间】：2021-07-08 13:53:56
【问题描述】：

我一直在使用 react-hooks 一段时间，并且印象中一旦进行了一些更改，就会调用 useEffect。但是在我的情况下，当在useEffect中调用api时，它会连续呈现数据。

这是我的 useEffect 代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function BookFunction() {
    
    const [bookData, setBookData] = useState([])

     useEffect(() => {
         function fetchInfo() {
            axios.post(`/api/book/bookDetails`).then((data) => {
                setBookData(data.data)
                }).catch(error => {
                    console.log(error);
                })
         }
         fetchInfo()
     }, [])

    console.log('this is bookdata',bookData) => bookdata is printed in the browser again and again

}

当我执行 console.log(bookData) 时，它会在浏览器中一遍又一遍地呈现。

如何防止这种情况，使其只渲染一次或两次？

我尝试过不使用 useEffect 作为，

     function fetchInfo() {
        axios.post(`/api/book/bookDetails`).then((data) => {
            setBookData(data.data)
            }).catch(error => {
                console.log(error);
            })
     }
     fetchInfo()

但是它使系统崩溃了。

还有其他方法可以实现我的目标吗？如果有人需要任何进一步的信息，请告诉我。

【问题讨论】：

你把 console.log 放在哪里了？
从您的代码来看，useEffect 在挂载时应该只运行一次。但是，重要的是要知道你把 console.log 放在哪里。
为什么要在useEffect里面声明一个函数(fetchInfo)然后调用，而不是直接执行fetchInfo函数的内容？
我已经添加了完整的代码。请看一看。
@SinanYaman 你是在告诉我运行这个函数吗，我在第二次尝试中是如何尝试的。

标签： reactjs react-hooks

【解决方案1】：

使用虚拟 API 重新创建了您的用例，我没有看到 fetch 的这个问题。不同的是我在setBookData中使用了一个函数。

const { useEffect, useState } = React

const App = () => {
  const [bookData, setBookData] = useState([])
  
  useEffect(() => {
    function fetchInfo() {
      fetch('https://jsonplaceholder.typicode.com/todos')
        .then(response => response.json())
        .then(arr => {
          setBookData(() => {
            return arr.map(({title}) => title)
          })
        })
    }
    fetchInfo()
  }, [])

  console.log('this is bookdata', bookData)

  return (
    <div>
      {
        bookData.map((book, i) => {
          return `${i + 1}. ${book}`
        })
      }
    </div>
  )
}


ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>

【讨论】：