javascript - 在 useEffect 中响应异步数据获取

Question

我正在尝试通过 useEffect 中的异步方法加载数据。我传递了所有必要的依赖项，据我所知，useEffect 应该在组件安装时、第一次渲染时以及依赖项更改时起作用。

useEffect(() => { 
        console.log('effect')
        if (ids.length === 0) {
            api.images.all().then((data) => { console.log(data); setIDs(data) }).catch(console.log)
        }
    }, [ids])

在我的例子中是 3 次:挂载(它应该立即加载数据)，第一次渲染(不应该进入 if)，并且由于 ids 改变(也不应该进入 if)。但是 useEffect 触发了 4 次并加载了两次数据，我不明白为什么。

组件代码:

//BuildIn
import { useEffect, useState } from 'react'
//Inside
import api from '../services/api.service'
import AsyncImage from '../components/AsyncImage.component'

const ImagesPage = () => {
    const [ids, setIDs] = useState([])

    useEffect(() => { 
        console.log('effect')
        if (ids.length === 0) {
            api.images.all().then((data) => { console.log(data); setIDs(data) }).catch(console.log)
        }
    }, [ids])

    return(
        <>
            {(ids.length > 0) ? ids.map((id, index) => <AsyncImage guid={id} key={index} />) : <div>No data</div>}
        </>
    )
}

export default ImagesPage

Answer 1

我已经重新实现了您示例的业务逻辑，并且运行良好。您唯一需要修复的是将 setIDs 作为依赖项传递给 useEffect。该组件渲染两次，这很好；第一个是初始渲染，第二个是在数据存在时发生。

您甚至可以摆脱 if 条件。不要将 id 传递给 useEffect Hook ，它只会在挂载时获取图像。

// import { useState, useEffect } from 'react' --> with babel import
const { useState, useEffect } = React  // --> with inline script tag

const api = {
  images: { all: () => new Promise(res => res(['id1', 'id2'])) }
}

const ImagesPage = () => {
    const [ids, setIDs] = useState([])

    useEffect(() => { 
      api.images.all()
      .then(data => {
        setIDs(data)
      })
      .catch(console.log)
    }, [setIDs])

    return(
      <ul>
        {console.log('reders')}
        {ids.map(id => <li key={id}>{id}</li>)}
      </ul>
    )
}

ReactDOM.render(<ImagesPage />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>