如何从 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])

希望能帮助到你！