为什么 Reagent 会以三种方式渲染 JSON？

Question

我正在尝试从 Clojurescript/Reagent 中的 API 调用中呈现 JSON 数据。当我使用 js/alert 时，我看到 json 我期望：["Sue" "Bob"]

(defn- call-api [endpoint]
  (go
    (let [response (<! (http/get endpoint))]
      (:names (:body response)))))

;; -------------------------
;; Views

(defn home-page []
  [:div (call-api "/api/names")])

这就是我引用库的方式（以防出现问题）。

(ns myapp.core
    (:require [reagent.core :as reagent :refer [atom]]
              [reagent.session :as session]
              [cljs-http.client :as http]
              [cljs.core.async :refer [<! >!]]
              [secretary.core :as secretary :include-macros true]
              [accountant.core :as accountant])
    (:require-macros [cljs.core.async.macros :refer [go]]))

但是当我将它记录到控制台时，我得到一个长散列，看起来与 API 响应完全不同。浏览器呈现“00000000000120”。

为什么这些结果不同？（浏览器、警报 window、控制台消息）
如何让我在警报 window 中看到的内容呈现在页面上？

Answer 1

当您调用 call-api 时，它将进入 return 一个 go 块。与其尝试直接在 Reagent 函数中使用该 go 块，不如更新 ratom 中的 return 值。

(def app-state (atom)) ;; ratom

(defn- call-api [endpoint]
  (go
    (let [response (<! (http/get endpoint))]
      (reset! app-state (:names (:body response))))))

(defn home-page []
  [:div @app-state])

(defn main []
  (call-api))

为什么 Reagent 会以三种方式渲染 JSON？

Why does Reagent render JSON in three ways?

json

clojure

reactjs

clojurescript

reagent