使用 React 在 Javascript 中调用 Java 方法

Question

我正在尝试制作一个网页来显示不同交易所的资产价格。我有一个发出 http 请求的 java 类，现在我需要使用正在设计网页的 js 代码以某种方式调用这些变量。任何帮助都会很棒，请告诉我是否还需要添加任何其他代码来帮助确定我的问题？

我认为调用在这里进行，但我不确定我是否还需要在我的 java 类中执行任何操作，例如以某些格式保存变量，就像它们现在在地图中一样。

<div className = 'Middle'>
       <Exchange name = "Coinbase" btcBuy = "" btcSell = "" ethBuy = "" ethSell = ""/>
       <Exchange name = "Binance" btcBuy = "" btcSell = "" ethBuy = "" ethSell = ""/>
       <Recommendations/>
    </div>

Answer 1

有几个问题。第一个是如何处理状态 - 一旦获得数据，组件如何呈现它。第二个问题是如何多次调用端点，但仍然只用一组数据来更新状态。

首先：React 功能组件可以使用钩子，在本例中我们使用

useState

来存储数据，并使用

useEffect

来获取数据。

第二：构建一个 Promise 数组（其中数组中的每个元素都是服务器的新

fetch

），然后使用

Promise.all

等待所有服务器调用解析。然后，您可以使用数据更新状态，然后使用该状态来渲染组件及其子组件。

代码看起来大概像这样。

const { useEffect, useState } = React;

function Example() {

  const [ data, setData ] = useState([]);

  useEffect(() => {

    // Generic fetch params
    const arr = [1, 2, 3];

    async getData() {

      // Get an array of fetch promises using the params
      // Wait for them to resolve, return the parsed data, and
      // then set the state with that data
      const promises = arr.map(el => fetch(`endpoint?query${el}`));
      const response = await Promise.all(promises);
      const data = response.map(async el => await el.json());
      setData(data);
    }
    getData();
  }, []);

  // `map` over the data to create your
  // Exchange components
  return (
    <div>
      {data.map(obj => {
        <Exchange
          name={obj.name}
          btcBuy=""
          btcSell=""
          ethBuy=""
          ethSell=""
        />
      })}
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

Answer 2

您可以尝试的一个解决方案是将 java 程序公开为 Rest API。我们最初放置此项目是为了 Java 脚本访问 Java 代码，但它也适用于其他项目。

https://github.com/adobe/bridgeService

您可以将bridgeService放入您的java项目中，或者将您的java库直接放入bridgeService项目中。

运行后，您可以使用以下有效负载调用 Java 代码。

{
  "callContent": {
    "<ID>": {
      "class": "<package name>.<class Name>",
      "method": "<method name>",
      "args": [
        "argument1",
        "argument2"
      ]
    }
  }
}

我希望这有帮助。