useEffect 空数组回调不起作用

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 的用户数据值。

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])