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

Question

Im trying to do a RPG table using react-konva and I coudnt render images from database dynamically user the hook useImage, Its now work inside the map.

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>

That way us working but with static image for all itens. How could I put the useImage inside de map?

I return this error message when I tried

I also need to move each one and rotate. I did the rotate like this, looks like it worked!

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

Answer 1

This is because hooks must be deterministic in their ordering. By putting a hook outside of the component, react is able to guarantee the order of the useImage hook in each render.

If you put it inside of the components props then react cannot guarantee the order; If the array changes order, or items are removed from the array then the hooks will no longer be in the same order as they were in the initial render.

Read more about why they have to be in order here: https://reactjs.org/docs/hooks-rules.html#explanation

To solve your problem, you can instead push down the useImage call into a component:

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

Then in the.map:

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