javascript - 如何在 gatsby js 中将异步获取请求的结果放入我的布局并做出反应

Question

我有以下 fetchData 异步函数从 lambda 函数返回一条消息我想获取该响应并将其转储到我的页面上我正在使用 react-hooks-async 包，其中包含一个 useEffect。但是，当我在 useAsyncTask 内启动该函数时，它只会继续运行并且永远不会得到结果。如果我将一个按钮连接到 start() 函数并且它会显示正确，我可以做到这一点，但我希望它在加载时运行。

我正在使用 Gatsby JS 并做出反应

var fetchData = async function run() {
      const response = await fetch(fetchUrl, {
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          customer_id: parsed.session_id,
        }),
      })
        .then(res => {
          return res.json()
        })
        .catch(error => console.log(error))
      console.log(response)

      return response
    }

    const Customer = () => {
      const { start, started, result } = useAsyncTask(fetchData)

      useEffect(() => {
        console.log("result")
        console.log(result)
        console.log("result ends")
        start()
      }, [result])

      return (
        <div>
          {started && "Fetching..."}
          <div>Name: {result && result.message.customer_id}</div>
        </div>
      )
    }

标签： javascriptreactjsasync-awaitgatsbyfetch-api

Answer 1

我过度设计了它。所需要的只是以下

fetchData().then(value => console.log(value))

    const Test = () => {
      const [data, setData] = useState("")

      useEffect(() => {
        fetchData().then(test => {
          setData(test)
        })
      }, [])

      return data && <p>{data.message.customer_id}</p>
    }