Question

我正在尝试使用Context API，但是在React挂钩中使用该值时遇到了问题。

这是我创建上下文的方式：

import React from 'react'

export const DecimalSeparatorContext = React.createContext('.')

export function getDecimalSeparator () {
  return React.useContext(DecimalSeparatorContext) || '.'
}

export function isDecimal (value: string): boolean {
  const decimal = getDecimalSeparator()
  return !!value && value.includes(decimal)
}

这是我将其插入到应用程序中的方式：

const App: React.FC<AppProps> = ({ decimalSeparator = '.' }) => {
  return (
    <DecimalSeparatorContext.Provider value={decimalSeparator}>
    ...
    </DecimalSeparatorContext.Provider>
  )
}

但是当我想在一个钩子中使用它时，会出现错误：

   const Component = (props) => {
     useEffect(() => isDecimal(myDecimal),[myDecimal])
     // -> Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
   }

我知道我无法在一个钩子中执行useContext。

那么正确的方法是什么？

Answer 1

您是否尝试在useEffect之前运行useContext？

类似的东西：

const Component = (props) => {
    const myDecimal = isDecimal('12.3');
    useEffect(() => {
      if(myDecimal) {
        // use myDecimal here
      }
    },[])
}

在一个钩子中访问上下文值

1 个答案: