渲染具有二極管錯誤的反應（scalajs-react）組件

我將使用二極管來管理具有單向數據流的應用程序狀態。我用Playframework 2.4和Scala.js這裏是build.sbt客戶端子項目的一部分：渲染具有二極管錯誤的反應（scalajs-react）組件

libraryDependencies ++= Seq(
    ... 
    "me.chrons" %%% "diode" % "1.0.0", 
    "me.chrons" %%% "diode-react" % "1.0.0", 
    "com.github.japgolly.scalajs-react" %%% "core" % "0.11.3", 
    "com.github.japgolly.scalajs-react" %%% "extra" % "0.11.3" 
),

我能夠從運行基本樣本scalajs-反應，並決定與二極管支持擴展Timer sample。我寫了一個Curcuit對象：

object TimerCircuit extends Circuit[TimerRootModel] with ReactConnector[TimerRootModel] { 
    // initialModel and actionHanler implemented here 
}

教程和樣本不告訴我們如何使使用做出反應成分ReactDOM.render(...)，但只用包japgolly.scalajs.react.extra.router。

不過，我不想使用路由器這個時間，只想呈現我的組件到HTML根標籤是這樣的：

class ReactStateSampleView() { 

    case class State(secondsElapsed: Long) 

    class Backend($: BackendScope[ModelProxy[String], State]) { 
    val DefaultInterval: Long = 1000 

    //noinspection ScalaStyle 
    var interval: js.UndefOr[js.timers.SetIntervalHandle] = js.undefined 

    def tick: Callback = $.modState(s => State(s.secondsElapsed + 1)) 

    def start: Callback = Callback { 
     interval = js.timers.setInterval(DefaultInterval)(tick.runNow()) 
    } 

    def clear: Callback = Callback { 
     interval foreach js.timers.clearInterval 
     interval = js.undefined 
    } 

    def render(s: State): ReactTag = 
     <.div("Seconds elapsed: ", s.secondsElapsed) 
    } 

    val timer = ReactComponentB[ModelProxy[String]]("Timer") 
    .initialState(State(0)) 
    .renderBackend[Backend] 
    .componentDidMount(_.backend.start) 
    .componentWillMount(_.backend.clear) 
    .build 

    val sc = TimerCircuit.connect(_.data) 

    ReactDOM.render(sc(p => timer(p)), dom.document.getElementById("timer"))

但這部分

ReactDOM.render(sc(p => timer(p)), dom.document.getElementById("timer"))

沒有按」工作。項目不編譯並顯示"RuntimeException: There were linking errors"

如何解決問題？

更新

這裏是連接錯誤和堆棧跟蹤的準確消息：

[info] Fast optimizing C:\tmp\project\client\target\scala-2.11\client-fastopt.js 
[error] Referring to non-existent class japgolly.scalajs.react.Callback$ResultGuard$ 
[error] called from diode.react.ReactConnector$$anonfun$wrap$1.apply(java.lang.Object)scala.Function0 
[error] called from diode.react.ReactConnector$$anonfun$wrap$1.apply(java.lang.Object)java.lang.Object 
[error] called from japgolly.scalajs.react.Internal$FnComposer$$anonfun$apply$2$$anonfun$apply$3.apply(java.lang.Object)java.lang.Object 
[error] called from japgolly.scalajs.react.CompState$RootAccessor.modState(japgolly.scalajs.react.CompScope$CanSetState,scala.Function1,scala.Function0)scala.Unit 
[error] called from japgolly.scalajs.react.CompState$RootAccessor.modState(java.lang.Object,scala.Function1,scala.Function0)scala.Unit 
[error] called from japgolly.scalajs.react.CompState$WriteCallbackOps$class.modState(japgolly.scalajs.react.CompState$WriteCallbackOps,scala.Function1,scala.Function0)scala.Function0 
[error] called from japgolly.scalajs.react.CompState$ReadCallbackWriteCallback.modState(scala.Function1,scala.Function0)scala.Function0 
[error] called from org.example.client.playground.ReactStateSampleView$Backend.tick()scala.Function0 
[error] called from org.example.client.playground.ReactStateSampleView$Backend$$anonfun$start$1.apply$mcV$sp()scala.Unit 
... 
Caused by: java.lang.RuntimeException: There were linking errors 
    at scala.sys.package$.error(package.scala:27) ~[scala-library-2.11.8.jar:na] 
    at org.scalajs.core.tools.linker.frontend.BaseLinker.linkInternal(BaseLinker.scala:133) ~[na:na] 
    at org.scalajs.core.tools.linker.frontend.BaseLinker.linkInternal(BaseLinker.scala:86) ~[na:na] 
    at org.scalajs.core.tools.linker.frontend.LinkerFrontend$$anonfun$4.apply(LinkerFrontend.scala:54) ~[na:na] 
    at org.scalajs.core.tools.linker.frontend.LinkerFrontend$$anonfun$4.apply(LinkerFrontend.scala:54) ~[na:na] 
    at org.scalajs.core.tools.logging.Logger$class.time(Logger.scala:28) ~[na:na] 
    at org.scalajs.sbtplugin.Loggers$SbtLoggerWrapper.time(Loggers.scala:7) ~[na:na] 
    at org.scalajs.core.tools.linker.frontend.LinkerFrontend.link(LinkerFrontend.scala:53) ~[na:na] 
    at org.scalajs.core.tools.linker.Linker$$anonfun$link$1.apply$mcV$sp(Linker.scala:50) ~[na:na] 
    at org.scalajs.core.tools.linker.Linker$$anonfun$link$1.apply(Linker.scala:49) ~[na:na]

來源

2017-01-27 Alex Karasev

鏈接錯誤的確切消息是什麼，以及上面顯示了哪些堆棧跟蹤？這些信息對於確定代碼/依賴項的哪一部分負責至關重要。 – sjrd

@sjrd，我已經更新了這個問題。堆棧跟蹤僅指向'org.scalajs' –

我的意思是上面的堆棧跟蹤*「存在鏈接錯誤」消息。這很有趣。它告訴不能鏈接的東西。 – sjrd

的連接錯誤提示，之間有一個二進制不兼容scalajs反應的和二極管。這聽起來似是而非從libraryDependencies，因爲：

您取決於scalajs-react-core 0.11.3，但
您還取決於diode 1.0.0，which depends on scalajs-react-core 0.11.1。

如果scalajs-react-core中的二進制不兼容的變化從0.11.1變爲0.11.3，那可以解釋您的問題。

如果我是對的，你可以通過升級到Diode 1.1.0,which uses scalajs-react-core 0.11.3來解決這個問題。

來源

2017-01-27 17:49:00 sjrd

渲染具有二極管錯誤的反應（scalajs-react）組件

回答

相關問題