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

Question

我正在尝试使用 react-konva 制作一个 RPG 表，并且我无法使用钩子 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 中？

我尝试时返回此错误消息

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

 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}/>)