Question

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch(
      'https://api.github.com/repos/tannerlinsley/react-query'
    ).then((res) => res.json())
  )
  console.log({ data })

  return {
    props: {
      data,
    },
  }

尽管有很多问题与在stackoverflow中响应无效的钩子调用有关，但仍然没有一个能够解决我的问题。

Answer 1

class LoginFragment() : Fragment(), KodeinAware { override val kodein by kodein() private val factory: LoginViewModelFactory by instance() private lateinit var binding: LoginFragmentBinding private lateinit var viewModel: LoginViewModel private var emailOrPhone: EditText? = null private var password: EditText? = null companion object { fun newInstance(): LoginFragment { return LoginFragment() } } override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { binding = DataBindingUtil.setContentView(requireActivity(), R.layout.login_fragment) viewModel = ViewModelProvider( this, factory ).get(LoginViewModel::class.java) val view = inflater.inflate(R.layout.login_fragment, container, false) emailOrPhone = view?.findViewById(R.id.edt_number_or_email) password = view?.findViewById(R.id.edt_password) return view } fun userLoginService() { val email = binding.edtNumberOrEmail.text.toString() val password = binding.edtPassword.text.toString() val liveData = viewModel.getDataFromService() liveData.observe(this, Observer { if (it != null) { viewModel.saveTODatabase(it) } }) }是一个钩子吗？如果是这样，则必须将其命名为getServerSideProps。

（在@Patrick_Roberts注释后进行编辑，说它不是一个钩子，而是一个特殊功能）

然后，您将无法在其中调用useServerSideProps（以useQuery开头的任何内容都是钩子）...如果use不是钩子，则应重命名。如果它是无法重命名的外部函数，只需禁用此行的linter错误。

请参见https://en.reactjs.org/docs/hooks-rules.html

Answer 2

根据官方文档，这是正确的方法。

const getPosts = () =>
  fetch('https://api.github.com/repos/tannerlinsley/react-query').then((res) =>
    res.json()
  )
export const getServerSideProps: GetServerSideProps = async (context) => {
  const queryCache = new QueryCache()

  await queryCache.prefetchQuery('posts', getPosts)

  return {
    props: {
      dehydratedState: dehydrate(queryCache),
    },
  }
}

家庭组件

 const { data } = useQuery('posts', getPosts)

getServerSideProps（Nextjs）中的无效钩子调用

2 个答案: