Перемещение div путем передачи избыточного состояния в динамические реквизиты

Question

Я собрал эту маленькую песочницу, чтобы продемонстрировать: https://codesandbox.io/s/64xv97y45n

Фиолетовый div в верхнем левом углу должен двигаться, когда набираются буквы.Когда печатается буква, значение currIndex (в настоящее время активное поле) в хранилище с избыточностью увеличивается или уменьшается соответственно.Затем редуктор использует currIndex для вычисления currentCoords или новой абсолютной позиции div (для целей прикрепленной песочницы, «немного правее»).Свойство хранилища currentCoords затем передается как опора для управления динамической позой пурпурного div.Но div отказывается обновить свою позу.Redux DevTools говорит мне, что currentCoords обновляется должным образом или, по крайней мере, достаточно хорошо, чтобы он немного двигался.Что дает?

Соответствующая логика:

 const reducer = (state = initState, action) => {
      switch (action.type) {
        case "KEYPRESS":
          return {
            ...state,
            number: [...state.number, action.key],
            currIndex: ++state.currIndex,
            currentCoords: state.boxCoords[state.currIndex]
          };

<SNIP>

const Cursor = posed.div({
  visible: {
    opacity: 1,
    x: ({ xPos }) => xPos,
    y: ({ yPos }) => yPos
  },

  hidden: {
    opacity: 0
  }
});

<SNIP>



<Cursor
            className="cursor"
            initialPose="visible"
            xPos={this.props.currentCoords.x}
            yPos={this.props.currentCoords.y}
          />

Answer 1

Если вы хотите перевести элемент posed без изменения текущего pose, вам нужно передать poseKey, чтобы среагировать.Также согласно документации свойства initialPose:

Как только компонент монтируется, он переходит из этой позы в pose.

. Поэтому должен пройтиpose свойство компонента posed, в противном случае initialPose будет сброшено.Таким образом, в основном <Cursor> компонент должен отображаться так:

<Cursor
   className="cursor"
   initialPose="visible"
   pose="visible"                        // you can hold the pose in your state and use it here like this.state.pose
   poseKey={this.props.currentCoords.x}
   xPos={this.props.currentCoords.x}
   yPos={this.props.currentCoords.y}
/>