在 react-konva 上动态渲染来自数据库的图像

Question

我正在尝试使用 react-konva 做一个角色扮演游戏table，我无法从数据库动态渲染图像用户钩子 useImage，它现在在地图中工作。

const imagens =
    tokens && tokens.tokens && tokens.tokens.map(item => item.image)

    const [token] = useImage(imagens && imagens[0])

  return (
    <Stage
      x={stagePos.x}
      y={stagePos.y}
      width={1200}
      height={600}
      draggable
      onDragEnd={e => {
        setStagePos(e.currentTarget.position())
      }}
    >
      <Layer>
        {gridComponents}

        {tokens &&
          tokens.tokens &&
          tokens.tokens.map(item => (
            <Image
              draggable
              x={item.x}
              y={item.y}
              image={token} // item.image
              width={item.width}
              height={item.height}
              offsetX={item.width / 2}
              offsetY={item.height / 2}
              scaleX={1}
              rotation={item.angle}
              onDragEnd={handleDragEnd}
              onClick={() => {
                setAngle(angle + 45)
                item.angle += 45
              }}
            />
          ))}
      </Layer>
    </Stage>

我们就是这样工作的，但所有项目都使用静态图像。如何将 useImage 放入 de map 中？

我return这个错误信息当我尝试

我还需要移动每一个并旋转。我是这样旋转的，看起来成功了！

 onClick={() => {
                setAngle(angle + 45)
                item.angle += 45
              }}

Answer 1

这是因为挂钩的顺序必须是确定的。通过在组件外部放置一个钩子，React 能够保证每次渲染中 useImage 钩子的顺序。

如果放在components props里面，react不能保证顺序；如果数组更改顺序，或者项目从数组中删除，则挂钩将不再与初始渲染中的顺序相同。

在此处详细了解为什么它们必须按顺序排列：https://reactjs.org/docs/hooks-rules.html#explanation

要解决您的问题，您可以将 useImage 调用下推到组件中：

const Token = props => {
    const [tokenImg] = useImage(props.image);
    return (
       <Image
          image={tokenImg}
          / * snip */
       />
    );
}

然后在.map中：

tokens.tokens.map(item => <Token image={item.image}/>)

在 react-konva 上动态渲染来自数据库的图像

Render Image from database dynamically on react-konva

reactjs

konvajs

react-konva