Question

即使它抓住了细节，我的useEffect也会永远运行，但是当我添加空数组回调时，因为我只希望它运行一次，所以它不会运行。

前端代码

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

export default function AdminPage(props) {

    const [ userId, setUserId ] = useState('');
    const [ products, setProducts] = useState([]);

    const getProducts = (id) => {
        Axios.post('/api/product/adminProducts', id)
        .then(res => {
            console.log(res.data.products)
            setProducts(res.data.products)
        })
        .catch(err => {
            console.log(err)
        })

    }

    useEffect(() => {
        if(props.user.userData) {
            console.log(props.user.userData._id)
            setUserId(props.user.userData._id)
        }    
        const userid = {
            id: userId
        }
        getProducts(userid)
    })

    return (
        <div style={{paddingTop: '50px'}}>
            {userId}
        </div>
    )
}

如果我像下面这样发挥使用效果，则会出现未处理的拒绝状态400错误，甚至无法从redux中获得userData值。

useEffect(() => {
        if(props.user.userData) {
            console.log(props.user.userData._id)
            setUserId(props.user.userData._id)
        }    
        const userid = {
            id: userId
        }
        getProducts(userid)
    }, [])

后端代码

router.post('/adminProducts', (req, res) => {
    Product.find({ writer: req.body.id}, (err, products) => {
        if(!products) {
            return res.status(400).json({ success: false, err });
        }
        console.log(products)
        return res.status(200).json({ success: true, products })
    })
})```

Answer 1

这是因为props.user.userData在第一个渲染中未定义或以其他方式丢失，因此该效果仅使用该值运行一次。您需要在useEffect中将其列为依赖项，以便正确触发它：

useEffect(() => {
  if (props.user.userData) {
    console.log(props.user.userData._id)
    setUserId(props.user.userData._id)
    const userid = {
      id: props.user.userData._id
    }
    getProducts(userid)
  }

}, [props.user.userData])

useEffect空数组回调不起作用

1 个答案: