Я пытаюсь выяснить, как обновить состояние компонента на основе внешнего события, и в этом случае внешнее событие - это сообщение, поступающее по каналу Elixir Phoenix.
По сути, у меня есть простой тег h1, и он всегда должен отражать последние новости, поступающие в канал. Итак, есть два взаимосвязанных вопроса:
а) как мне вставить канал в компонент? Пока я делал это, передавая канал как опору.
б) Как мне обрабатывать сообщения, поступающие в канал внутри компонента? Мой "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.
My "this.state.chan.on" doesn't work
Какая часть не работает? Выдает ошибку? Он вообще не вызывается? - person Dogbert   schedule 22.08.2017this.setState(prevstate => { return {mess: ${payload.body}} });
это похоже на синтаксическую ошибку. - person Dogbert   schedule 22.08.2017