Question

我想做什么

在 docker 容器中运行下一个应用程序并通过自定义钩子从 API 调用中获取数据

这看起来如何

index.tsx

// Imports

type HomeType = {
  json: {
    access_token: string
  }
}

const Home: React.FC<HomeType> = ({ json }) => {
  const { householdID, setHouseholdID, setAccessToken } = useHouseholdContext()
  const res = useUserData()
  const [profile, setProfile] = useState({})

  useEffect(() => {
    setAccessToken(json.access_token)
    console.log('set ' + json.access_token)
    return () => {
      setAccessToken('')
    }
  }, [json])

  const onSubmit = () => {
    setProfile(res)
    console.log('res')
  }

  return (
    <Phone>
      <div className={styles.background}>
        <div className={styles.formcontainer}>
          <h1>Welkom!</h1>
          <p>Voer hier je klantnummer in en krijg inzicht in je verbruik</p>
          <form className={styles.form} >
            <label htmlFor="householdID">Klantnummer</label>
            <input type="text" name="householdID" value={householdID} onChange={(e) => setHouseholdID(e.target.value)} required />
            <Button href="/live" text="Start!" handleClick={() => onSubmit()} />
          </form>
        </div>
      </div>
    </Phone>
  )
}


export async function getServerSideProps() {
  const options = {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({
      grant_type: "client_credentials",
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
      audience: "https://api.onzo.com/engagement/"
    })
  }

  const res = await fetch("https://api.company.io/oauth/token", options);
  const json = await res.json();

  return { props: { json } };
}

export default Home

家庭上下文.ts

// Imports

export const HouseholdContext = createContext<HouseholdType>({
    householdID: '',
    setHouseholdID: null,
    access_token: '',
    setAccessToken: null
})

export const useHouseholdContext = () => useContext(HouseholdContext)

// Provider

useUserData.ts

// Import

const useUserData = async () => {
    console.info('Getting access token and requesting user profile data')
    const { householdID, access_token } = useHouseholdContext()
    const [fetching, setFetching] = useState(true)

    const { response, error, request } = useFetch(
        `/api/engagement/v2/profile/${householdID}`,
        {
            method: "GET",
            headers: { "Authorization": `Bearer ${access_token}` }
        }
    );

    if (fetching && householdID !== '') {
        await request().then(res => console.log(res)).catch(err => console.log(err));
        setFetching(false)
    }

    if(!error){
        return response
    }
    

    return { error }
}

export default useUserData

错误

UnhandledPromiseRejectionWarning: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
app    | 1. You might have mismatching versions of React and the renderer (such as React DOM)        
app    | 2. You might be breaking the Rules of Hooks
app    | 3. You might have more than one copy of React in the same app
app    | See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
app    |     at resolveDispatcher (/usr/app/node_modules/react/cjs/react.development.js:1476:13)app  
  |     at useContext (/usr/app/node_modules/react/cjs/react.development.js:1484:20)
app    |     at useHouseholdContext (webpack-internal:///./utilities/contexts/household-context.tsx:18:91)
app    |     at eval (webpack-internal:///./utilities/hooks/useUserData.ts:28:130)
app    |     at runMicrotasks (<anonymous>)
app    |     at processTicksAndRejections (internal/process/task_queues.js:93:5)

我尝试了什么？

我想说一切，但还不够清楚，所以这里有一个简短的列表：

删除了 node_modules 和 .next
以多种方式更改了 webpack 配置（WithTM、设置别名、设置外部对象等。
尝试检查是否有多个 React 实例，但我只收到错误消息，提示“窗口实例上不存在 React2”
尝试在本地而不是在容器中运行它

我想我已经尝试了 this thread 和 this thread 中的每个选项，但我仍然收到此错误，这里有人可以提供帮助吗？

NextJS 不识别自定义钩子

我想做什么

这看起来如何

我尝试了什么？

0 个答案: