1

外部イベントに基づいてコンポーネントの状態を更新する方法を見つけようとしています。この場合、外部イベントは Elixir Phoenix チャネルを下るメッセージです。

基本的に、私は単純な h1 タグを持っており、チャンネルに入ってくる最新のものを常に反映する必要があります。したがって、相互に関連する2つの質問があります。

a) チャネルをコンポーネントに入れるにはどうすればよいですか? これまでのところ、チャネルを小道具として渡すことでそれを行ってきました。

b) コンポーネント内のチャネルに入ってくるメッセージをどのように処理しますか? 私の「this.state.chan.on」がうまくいかず、ぎこちないようです。

import socket from "./socket"
import React from "react"
import ReactDOM from "react-dom"

socket.connect()

// Now that you are connected, you can join channels with a topic:
let channel = socket.channel("topic:subtopic", {})

channel.join()
  .receive("ok", resp => { console.log("Joined successfully", resp) })
  .receive("error", resp => { console.log("Unable to join", resp) })

class HelloWorld extends React.Component {
  state = {
    chan: this.props.channel,
    mess: this.props.message
  }

  this.state.chan.on("new_message", payload => {
    this.setState(prevstate => {
      return {mess: ${payload.body}}
    });
  })


  componentDidMount = () => {
    console.log("did mount Hello World")
  }

  render = () => {
    return (<h1>{this.state.mess}</h1>)
  }
}


ReactDOM.render(
  <HelloWorld message={1} channel={channel}/>,
  document.getElementById("hello-world")
)

これを行うための受け入れられた方法は何ですか? コンポーネントの状態に影響を与えるために、反応の外部およびユーザーインターフェイスの外部で生成されたチャネルまたはソケットなどからメッセージを取得するにはどうすればよいですか? チャネルをコンポーネントに入れるのは正しいですか? それはまた、チャネルの出力をそのコンポーネントのみに影響を与えるように制限し、影響を与えたい他の独立したコンポーネントには制限していないように見えるからです。

編集: コンパイル エラー メッセージは次のとおりです。はい、JS が正しくない可能性がありますが、最初の this.state.chan.on で構文エラーが発生します。

17:55:13 - error: Compiling of web/static/js/app.js failed. L40:6 Unexpected token 
     38 |   }
     39 | 
   > 40 |   this.state.chan.on(
        |       ^
     41 | 
     42 |   componentDidMount = () => {
     43 |     console.log("did mount Hello World")
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace. 
18:07:20 - error: Compiling of web/static/js/app.js failed. L40:6 Unexpected token 
     38 |   }
     39 | 
   > 40 |   this.state.chan.on("new_message", payload => {
        |       ^
     41 |     this.setState(prevstate => {
     42 |       return {mess: ${payload.body}}
     43 |     });
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace. 
18:07:22 - error: Compiling of web/static/js/app.js failed. L40:6 Unexpected token 
     38 |   }
     39 | 
   > 40 |   this.state.chan.on("new_message", payload => {
        |       ^
     41 |     this.setState(prevstate => {
     42 |       return {mess: ${payload.body}}
     43 |     });
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace.
4

1 に答える 1