Рендеринг изображения из базы данных динамически на react-konva - PullRequest
Новая
       97

Рендеринг изображения из базы данных динамически на react-konva

2 голосов
/ 18 июня 2020

Я пытаюсь создать таблицу RPG с помощью response-konva, и я не могу визуализировать изображения из базы данных динамически, используя крючок useImage, теперь он работает внутри карты. c изображение для всех itens. Как я могу поместить useImage в карту?

Я возвращаю это сообщение об ошибке, когда пробовал enter image description here

Мне также нужно переместить каждый из них и повернуть. Я сделал поворот вот так, похоже, это сработало! 

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

1 Ответ

3 голосов
/ 18 июня 2020

Это потому, что крючки должны быть c детерминированы в своем порядке. Помещая ловушку вне компонента, react может гарантировать порядок ловушки useImage в каждом рендере.

Если вы поместите его внутри реквизита компонентов, то реакция не может гарантировать порядок; Если порядок в массиве изменится или элементы будут удалены из массива, то перехватчики больше не будут в том же порядке, в каком они были при первоначальном рендеринге.

Подробнее о том, почему они должны быть в порядке, читайте здесь: https://reactjs.org/docs/hooks-rules.html#explanation

Чтобы решить вашу проблему, вы можете вместо этого sh использовать вызов useImage в компоненте: 

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

Затем в .map: 

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