reactjs - 无休止的渲染 API 循环

Question

有朋友的API，这样的代码代码无限循环，我想这是因为我没有停止responce.result的传输，但我不知道如何解决它

函数 FriendsAPI(){

const [items, setItems] = useState([1,2,3,4,5,6])
const [loading, setLoading] = useState(false)

useEffect (() =>{
    fetch("https://randomuser.me/api/?results=6&nat=US")
        .then((response) => response.json())
        .then((response) => {
                setItems(response.results)
                setLoading(true)
        })
})
    if(!loading){
        return (
            <div>Loading ...</div>
        )
    }
    else {
        return (
            <div className={classes.WrapperImage}>
                {console.log('render')}
                { items.map((item, index) => (
                    <div className={classes.Pictures} key={index}>
                    <img src={item.picture.medium} alt={item.name.first} className={classes.Img}/>
                    <p>{item.name.first}</p>
                    </div>
                )) }

            </div>
        )
    }
}

标签： reactjsreact-hooks

Answer 1

在 useEffect 的第二个参数中添加一个空数组

useEffect (() =>{
    fetch("https://randomuser.me/api/?results=6&nat=US")
        .then((response) => response.json())
        .then((response) => {
                setItems(response.results)
                setLoading(true)
        })
}, [])

这使它运行 componentDidMount