Question

我一直在尝试学习如何处理整个前端和后端通信事务。某种有趣的事情刚刚发生。我想知道什么，如何做以及其他所有内容。

在这里进行设置。我要做的就是制作一个Fetcher组件，该组件将从输入表单中获取值，将其发送到后端，然后发送回一些东西……简单的东西，对吧？

BUUT，让我为您展示Node日志中的一个片段

GET /error.js 404 2.031 ms - 1396
  express:router serveStatic  : /Navrouter.js +0ms
GET /Navrouter.js 404 1.615 ms - 1396 
   express:router serveStatic  : /client/index.js +0ms
GET /client/index.js 404 1.597 ms - 1396
 express:router <anonymous>  : /NYT.js +0ms
GET /Search.js 404 1.693 ms - 1396
   NotFoundError: Not Found

我要在这里切掉很多绒毛，但要领。 React似乎是从后端调用我的组件。在写这篇文章时，我意识到我从来没有正确地链接我的提取函数。我的package.json中确实有一个proxy: localhost:port。所以我知道多数民众赞成在它如何访问后端。但我不知道它如何或为什么请求这些文件而不是像往常一样加载它们。

这是组件的代码

 import React, { useState } from 'react'
 import Fetcher from '../../hooks/fetcher/fetcher'
 import Client from '../../api'
 import Input from '../../hooks/input'

const Search = () => {
// everything above is being requested from NODE
//theres a fair bit of code here that isn't executing so I took it away

return (
    <div>
        <form onSubmit={doSearch}>
            <Input
                name="keyword"
                type="text"
                value={values.keyword}
                onChange={onChange}
            />
              </form>

        <Fetcher/> <===renders without this, but gets wierd with
    </div>
   )

}

导出默认搜索

如果我删除Fetcher，则组件中的每个组件都会很好地加载。但是，如果将其简化为</Fetcher>，那么奇怪的黑屏事件就会做出反应并尝试请求加载时的所有文件...所以我想我可以遵循这个兔子漏洞，并在后端将文件制作到该节点有一些服务...但是那不是我在这里做什么...无论如何

我想知道这里发生了什么。（我也希望我的应用能够正常工作，但这是另一个问题，这很有趣）这是提取程序的一部分...我“借用”它，不要判断我。

import useFetcher from './useFetcher'
import Error from './error'

const Fetcher = ({ action, children }) => {
const [data, loading, error] = useFetcher(action)

if (loading) return <div>loading....</div>
if (error) return <Error error={error} />

if (!data) return null
return children(data)
}

export default Fetcher

所以知道我已经看到了所有这些，但我意识到我没有链接具有实际提取逻辑的伪控制器。这就开始解释事情了。所以我认为答案就在这里。

 import { useState, useEffect } from 'react'

export default function useFetcher(action) {
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
const [data, setData] = useState(null)

async function loadData() {
    try {
        setLoading(true)
        const actionData = await action()
        setData(actionData)
    } catch (e) {
        setError(e)
    } finally {
        setLoading(false)
    }
}

useEffect(() => {
    loadData()
}, [action])

return [data, loading, error]
}

我的猜测是，由于我没有发送动作，因此useEffect挂钩正在使用async await函数进行一些时髦的操作。但是我真的只是在扔泥巴。你怎么看？我做了什么？

我不包含任何后端代码，因为我看不到与React请求事情有什么关系。

我是否无意中让React寻找服务器端渲染？

0 个答案: