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

Question

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

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

当 useEffect 运行时，它表示从状态 ID 中检索到一个空字符串。在从 useState 设置状态“id”并从存储中检索状态“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 (
        ...

   )

 }

Answer 1

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

我相信这会起作用:

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 添加到数组依赖项中。