React Hooks and ActionCable

Question

[试图与React新的Hooks和ActionCable相处，但是遇到了在尝试发送状态时无法在Rails中获得正确数据的问题。

我已经尝试在执行send()之后立即使用setState()方法并发送了更新的数据，但是由于某些原因，在Rails部件上接收到的数据是旧的。例如，如果在输入中输入“ Example”，则会在Rails端看到“ {{data” =>“ Exampl”}。我认为数据更新状态要晚于请求的执行时间。如果我send()的e.target.value值一切正常

因此，我尝试使用新的useEffect()挂钩并在那里发送数据。但是我在渲染页面时只得到数据。之后，我什么也没得到，有时会出错RuntimeError - Unable to find subscription with an identifier。似乎效果钩子太早发送数据了。

我对Hooks和WebSocket还是很陌生。希望在这里获得任何帮助。我可以共享Rails代码，但是只有一个接收器，没有别的。

第一例：

import React, { useState, useEffect } from "react"
import ActionCable from 'actioncable'

function Component(props) {
const [data, setData] = useState("");

const cable = ActionCable.createConsumer('ws://localhost:3000/cable');
const sub = cable.subscriptions.create('DataChannel');

const handleChange = (e) => {
 setData(e.target.value)
 sub.send({ data });
}

return (
  <input value={data} onChange={handleChange}/>
 )
}

[尝试使用效果并在其中移动send()：

  useEffect(() => {
    sub.send({ data });
  }, [data]);

我很想找到一种正确使用React和ActionCable的方法。并尽可能使用钩子。

Answer 1

您可以像这样在根组件上注册电缆：

import actionCable from 'actioncable';

(function() {
  window.CableApp || (window.CableApp = {});
  CableApp.cable = actionCable.createConsumer('ws://localhost:3000/cable')
}).call(this);`

因此它将可以用作全局变量；

然后在要创建通道并发送数据的任何组件中：

const [channel, setChannel] = useState(null);
          useEffect(() => {
         CableApp.cable.subscriptions.create(
          {
            channel: 'YourChannelName',
          },
          {
            initialized() {
              setChannel(this)
            },
          },
        );
      }, []);

return <button onClick={() => channel.send(some_data)} >Send counter</button>