为什么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“。

• 为什么这些结果不同？(浏览器、警报窗口、控制台消息)
• 如何获得在警报窗口中看到的内容以在页面上呈现？

Answer 1

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

(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))