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

我正在尝试使用react konva制作一个RPG表，我无法从数据库用户hook 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>

---

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

如果你把它放在组件道具里面，那么react就不能保证秩序；如果阵列更改顺序，或从阵列中移除项目，则挂钩的顺序将不再与初始渲染中的顺序相同

请在此处阅读更多关于他们为什么必须井然有序的信息：

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

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

const-Token=props=>{
const[tokenImg]=useImage（props.image）；
返回(
);
}

然后在.map中：

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

tokens.tokens.map（item=>）

Ty迪伦！！！我工作得像个傻瓜！我有点搞不清楚我的功能，在这个组件的方式上，点击旋转和点击。把手柄和点击功能作为道具传递给令牌。然后可以将这些道具传递给图像组件。使用props.handleDrag和props.onClick

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