延迟 useEffect 直到 useSelector 从 React Native 中的 Redux 存储中检索数据答案

【问题标题】：Delay useEffect until useSelector retrieves data from the Redux store in React Native延迟 useEffect 直到 useSelector 从 React Native 中的 Redux 存储中检索数据
【发布时间】：2021-10-19 15:50:22
【问题描述】：

我有一个功能性反应组件 Tasks_1，最初，我想从成功运行的 redux 存储中检索 userId。

在此之后，我想使用我从 redux 存储中检索到的 useEffect 中的 userId 从后端获取数据。

当 useEffect 运行时，它表示从状态 ID 中检索到一个空字符串。在从 useState 设置状态“id”后如何让 useEffect 运行？

    function Tasks_1 () {
    
    const [id, setId] = useState('');
    
    const userId = useSelector((state) => state.id);
    const [tasks, setTasks] = useState([]);
    
    useEffect(() => {

        setId(userId);
    
        if (id !== '') {
            db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
                const tempTasks = [];
                snapshot.forEach(
                   doc => {
                       tempTasks.push(doc.data());
                   }
                )
                setTasks(tempTasks);
            });
        }
    
    }),[id];
    
    return (
        ...

   )

 }

【问题讨论】：

不太了解这个问题 - 是什么让您目前的方法不够用？我的意思是你有一个 if 语句 if (id !== '') 确保在没有设置 id 的情况下不调用数据库。
您忘记将 userId 添加到 useEffect 依赖项。它会在检索到值时更新。
是的，由于某种原因，从后端拍摄快照时，我会收到无限循环错误或“路径为空”错误。我现在还看到，我没有在依赖项中使用 userId，这是一个我直到现在都不熟悉的概念。

标签： javascript reactjs react-native react-redux

【解决方案1】：

如果你确实让它按照你的方式工作，你可能会得到一个无限循环。使用 setId 更新 id 将导致重新渲染，并且由于您更改了 id 等等，因此将再次调用 useEffect ......

我相信这会奏效：

const [id, setId] = useState('');

const userId = useSelector((state) => state.id);
const [tasks, setTasks] = useState([]);

useEffect(() => {

      // this will make sure you only set id when userId
      // is a valid value, and it won't reset it every
      // serenader
    if(userId!=='' && id !== userId)
       setId(userId);

    if (id !== '') {
        db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
            const tempTasks = [];
            snapshot.forEach(
               doc => {
                   tempTasks.push(doc.data());
               }
            )
            setTasks(tempTasks);
        });
    }

}, [id, userId]);

您必须将userId 添加到数组依赖项中。

【讨论】：

是的，有时我会遇到无限循环错误，所以我不知道如何构造它，以便之后接收来自后端的数据。让我试试你的建议！
在这种情况下，useEffect 是否有理由继续检查用户 ID 的变化？只是作为有趣的测试 im consol.log(userId) 并且几乎每隔一段时间就会记录它，但这确实对我有用！
@MattLaszcz useEffect 每次更新 id 或 userId 时都会被召回。您肯定会至少发生 3 次。一旦初始渲染，2d 当您收到 userId 的更新值时，第三次因为您 setId 与新的 userId 导致另一个重新渲染。在此之后，只有在这些值在外部发生变化时才应该调用它。
好吧，也许我的代码中还有其他东西需要调试，导致 id 被更新并导致我当时看到的重新渲染。我去看看。
试试这个看看userId是否不止一次更新。 useEffect(()=> console.log('here'),[userId]); 除了您当前的useEffect 之外，还添加它。您可以拥有多个。