Блог

У меня есть функциональный компонент реагирования Tasks_1, и изначально я хочу получить идентификатор пользователя из хранилища redux, который успешно работает.

После этого я хочу использовать идентификатор пользователя в useEffect, который я извлек из хранилища redux, для получения данных из серверной части.

Когда запускается useEffect, он говорит, что из идентификатора состояния извлечена пустая строка. Как я могу запустить useEffect после того, как состояние «идентификатор» задано в useState, извлекая его из хранилища?

     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 (
        ...

   )

 }
 

Вы можете получить бесконечный цикл, если вы заставите это работать так, как у вас есть. Обновление id setId с помощью приведет к повторному отображению, и эффект использования будет вызван снова, так как вы изменили 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!=='' amp;amp; 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 в массив зависимости.