1

Столкнулся с проблемой, не могу понять, почему внутри функции в контексте стоит предыдущее состояние:

Контекст:

export const WebinarContext = React.createContext({
    correctAnswerPromise: {func: () => {}},
    changePromise: () => {}
})

export const WebinarContextProvider = ({children}) => {
    const [correctAnswerPromise, changePromise] = useState({func: () => {}});

    return (
        <WebinarContext.Provider
            value={{correctAnswerPromise, changePromise}}>
            {children}
        </WebinarContext.Provider>
    )
}

Компонента в которой обновляется контекст: (является дочерней, по отношению к той, что представлена ниже):

...
useEffect(() => {
  context.changePromise({func: (resolve, reject) => {
      return setTimeout(resolve, 4000)
    }})
  }, [])
...

Компонента в которой, отслеживается работа функции:

const Lobby = ({lessonData, setEnd}) => {
    const [currentLesson, setCurrentLesson] = useState(lessonData.exercises[0]);
  
   // Получаю контекст (само собой, засунул компоненту в провайдер)
    const context = useContext(WebinarContext);

     // Для тестов сделал эффект, тут всё отрабатывает правильно,т.е. сначала выводит 
     // () => {}, затем (resolve, reject) => {return setTimeout(resolve, 4000)}
    //useEffect(() => {
      //  console.log(context.correctAnswerPromise.func);
    //}, [context.correctAnswerPromise.func])

    const openNextExercise = useCallback((isPauseEnd = false) => {

       //Вот тут основная проблема, чтобы я не делал, убирал useCallback, передавал через props, и т.д., функции пофиг, 
//она всё равно выводит () => {}, несмотря на то, что состояние не менеятся 
//и остаётся (resolve, reject) => {return setTimeout(resolve, 4000)} (эффект не срабатывает), 
//соответственно нет вызова resolve, следовательно блок then не срабатывает

        console.log(context.correctAnswerPromise.func);

        new Promise((resolve, reject) => {
            context.correctAnswerPromise.func(resolve, reject)
        })
            .then(() => {
                // Этот блок не выполняется, по причине описанной выше
                ...
            })
    }, [currentLesson, context.correctAnswerPromise.func]);

    return (
     ...
       // Дочерняя компонента, в которой вызывается функция
        <Timer
                ...
               openNextExercise={openNextExercise}
        />
     ...
    )

Почему в функции стоит первоначальный контекст, и как это поправить? Заранее, спасибо, за любую помощь!

1 ответ 1

-1

Блок then() не исполняется по другой причине...

    new Promise((resolve, reject) => {
        return context.correctAnswerPromise.func(resolve, reject)
//      ^^^^^^^
    })
        .then(() => {
            // Этот блок не выполняется, по причине описанной выше
            ...
        })

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.