2

我正在尝试使用 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
              }}
4

1 回答 1

3

这是因为钩子的顺序必须是确定的。通过在组件外部放置一个钩子，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}/>)
于 2020-06-18T07:38:32.417 回答