如何從 function 內部訪問我的反應鈎子 state

Question

我有一個應用程序，當用戶按下按鈕時會顯示一些問題。 在每個問題上，我都有一個條件來確定是否應在問題上顯示“返回”按鈕 - appState.questions.length > 0 。

我的問題是 state 沒有從我調用它的 function 到達。

let questionComponent = (currentCardKey, textAreaText = "") => {
    console.log(`Question length inside: ${appState.questions.length}`)
    return <Question
        textAreaText={"ereer"}
        // I can not access appState from here.
        shouldShowBackButton={appState.questions.length > 0}
        measureTextChangeHandler={measureTextChangeHandler}
        onChosenDataTypeChanged={onChosenDataTypeChanged}
        aimTextChangeHandler={aimTextChangeHandler}
        onButtonClicked={onButtonClicked}
        currentCardKey={currentCardKey}/>
}

我的代碼結構。

function App(){
    const [appState, setAppState] = useState(
        {
            questions: [], //[<Question />, <Question />]
            independentVariablesCount: 0,
        }
    )
    const [currentCard, setCurrentCard] = useState();
    
    const addToQuestion = (questionObject) => {
        setAppState(prevState => {
            questionLength.current = appState.questions.length
            return {...prevState, questions: [...prevState.questions, questionObject]}
        })
    }

    // I can access appState outside the function
    
    let questionComponent = (currentCardKey, textAreaText = "") => {

        console.log(`Question length inside: ${appState.questions.length}`)

        return <Question
            textAreaText={"ereer"}
           // I can not access appState inside this function
            shouldShowBackButton={appState.questions.length > 0}
            measureTextChangeHandler={measureTextChangeHandler}
            onChosenDataTypeChanged={onChosenDataTypeChanged}
            aimTextChangeHandler={aimTextChangeHandler}
            onButtonClicked={onButtonClicked}
            currentCardKey={currentCardKey}/>
    }

    const onButtonClicked = (_buttonText, previousCardComponent) => {
        const previousCard = previousCardComponent
        const previousCardMainText = previousCardComponent.props.mainText
        ...
        switch (_buttonText) {
            case buttonText["NEXT"]:
                switch (previousCardMainText){
                    case questionData["CAT_QUESTION"]:
                        addToQuestion(previousCard)
                        setCurrentCard(questionComponent("CAT_FOOD_QUESTION"))
                        break
                }
            ...
                break
        }
    }

    return (
        <div>{currentCard}</div>
    )
}

我嘗試在useEffect()中更新 function 但這並不能解決問題。 我已經搜索了諸如useState function 之類的解決方案在功能組件中不起作用，並且React 掛鈎 setState 沒有立即更新，但這些都不起作用。

如何解決這個問題？

Answer 1

我做錯了兩件事，我不記得在單擊開始按鈕時將第一個問題添加到 state 數組中，並且當問題長度更改時，我沒有為問題組件重新呈現正確的值做准備. 使用useRef掛鈎存儲questionComponent function。

所以我使用useRef掛鈎來存儲questionComponent並使用我擁有的addToQuestion function。

const questionComponent = useRef()

useEffect(()=>{
    questionComponent.current = (currentCardKey, textAreaText = "") => {
        console.log(`Question length inside: ${appState.questions.length}`)
        return <Question
            textAreaText={"ereer"}
            shouldShowBackButton={appState.questions.length > 0}
            measureTextChangeHandler={measureTextChangeHandler}
            onChosenDataTypeChanged={onChosenDataTypeChanged}
            aimTextChangeHandler={aimTextChangeHandler}
            onButtonClicked={onButtonClicked}
            currentCardKey={currentCardKey}/>
    }
})

const onStartButtonClick = () => {
    setStartButtonIsClicked(true)
    setCurrentCard(questionComponent.current("CAT_FOOD_QUESTION"))
    addToQuestion(questionComponent.current("CAT_FOOD_QUESTION"))
}

Answer 2

由於 javascript clousure 功能，您可以訪問初始 appState，因此 appState 長度始終保持為 0。

嘗試這個：

let questionComponent = React.useMemo((...) => {}, [appState]);

然后就可以訪問最新的appState

Answer 3

您是否嘗試過使用 useCallback？

Const questionComponent = useCallback((currentCardKey, textAreaText = "") => {

        console.log(`Question length inside: ${appState.questions.length}`)

        return <Question
            textAreaText={"ereer"}
           // I can not access appState inside this function
            shouldShowBackButton={appState.questions.length > 0}
            measureTextChangeHandler={measureTextChangeHandler}
            onChosenDataTypeChanged={onChosenDataTypeChanged}
            aimTextChangeHandler={aimTextChangeHandler}
            onButtonClicked={onButtonClicked}
            currentCardKey={currentCardKey}/>
    },[appState])

希望能幫助到你！