动态添加圈子以与区块链反应传单

Question

我已阅读 post 部分回答了我的问题，但我的问题是 provider.on 方法使用 setData(_data) 创建的无限循环。我只是想更新要从我的本地区块链呈现的圈子信息，但是 setData(_data) 调用创建了一个无限循环。

我试过使用全局变量而不是使用 useState，这解决了无限循环，但是在代码的其他部分看不到这个更新的值。

function App() {
  const initialPos = [55, 12];
  const zoomLv = 13;
  const [data, setData] = useState([])
  const greeterAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3"
  const provider = new ethers.providers.JsonRpcProvider("http://localhost:8545");
  const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)

provider.on("block", async (blockNumber) => {
  const _data = await contract.getCircle().split(", ") //[lat, lng, radius]
  setData(_data)
}); 

function RenderCircle() {
  if (data.length > 1) {
    return <Circle center={[parseFloat(data[0]), parseFloat(data[1])]} radius={parseFloat(data[2])} />
  }
  return null
}

  return (
    <>
      <MapContainer center={initialPos} zoom={zoomLv} id='map'>
        <TileLayer
          url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          maxZoom={20}
        />
        <RenderCircle/>
      </MapContainer>
    </>
  );
}

Answer 1

为了解决这个问题，我把它变成了一个反应组件class，并使用它的setState()而不是useState()。这避免了无限循环。

动态添加圈子以与区块链反应传单

Dynamically add circles to react leaflet with blockchain

reactjs

leaflet

use-state

react-leaflet

ethers.js