Я случайно заставил себя отреагировать на рендеринг сервера?

Question

Я пытался научиться делать что-то со всем внешним и коммуникационным интерфейсом. Что-то интересное просто случилось. Я хочу знать, что, как и все остальное.

Вот установка. Все, что я пытаюсь сделать, - это создать компонент Fetcher, который будет принимать значения из формы ввода, отправлять их в бэкэнд и отправлять обратно некоторые вещи ... простые вещи, верно?

BUUT, позвольте мне показать вам фрагмент из журнала узлов

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, кажется, вызывает мои компоненты из бэкэнда. При написании этого я понял, что я никогда не связывал должным образом свою функцию извлечения. У меня есть proxy: localhost:port в моем package.json. Так что я знаю, как это получить доступ к бэкэнду. но я не знаю, как и почему он запрашивает эти файлы, а не загружает их как обычно.

Это код для компонента

 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, запрашивающему вещи.