反应原生 - 变量以某种方式重置？答案

【问题标题】：React native - variables are resetting somehow?反应原生 - 变量以某种方式重置？
【发布时间】：2021-03-02 01:52:32
【问题描述】：

好的，我遇到了 var 和 React.useState() 变量的奇怪情况。我使用这个库https://github.com/tongyy/react-native-draggable#readme 来设置 2 个变量 -

var color1 = '';
var color2 = '';

取决于两个 Draggable 的位置。这是 Draggables：

<Draggable x={wp('40%')-(wp('16.5%')/2)} y={wp('45%')} renderSize={isTablet() ? wp('12%') : wp('16.5%')} hasBorder={true} renderColor={'#00000000'} minX={wp('0%')} maxX={wp('100%')} minY={hp('12%')} maxY={hp('40%')} renderText={''} isCircle onDragRelease={(event, gestureState) => ToggleComboColor1(event, gestureState)} onPressIn={() => {setDidDrag1(true);}} />

<Draggable x={wp('60%')-(wp('16.5%')/2)} y={wp('45%')} renderSize={isTablet() ? wp('12%') : wp('16.5%')} hasBorder={true} renderColor={'#00000000'} minX={wp('0%')} maxX={wp('100%')} minY={hp('12%')} maxY={hp('40%')} renderText={''} isCircle onDragRelease={(event, gestureState) => ToggleComboColor2(event, gestureState)} onPressIn={() => {setDidDrag2(true);}} />

我已将 onDragRelease 函数拆分为 2 个，以隔离其中一种颜色可能被重置的位置。它们是相同的功能。这是color2 的一个：

const ToggleComboColor2 = (event, gestureState) => {

      color2 = determineDraggableColor(gestureState.moveX, gestureState.moveY);
      console.log('Second: ', color2);

      if (didDrag1 && didDrag2 && color1 != '' && color2 != '') {
        //setCurrentKey("Combo");
        console.log(color1 + " | "+color2);
        setCurrentColorCombo(
          getColorComboItemArray(color1, color2)[0]
        );
        setCurrentKey("Combo");
        setDidDrag1(false);
        setDidDrag2(false);
      }

    }

这里是确定颜色的地方：

  const determineDraggableColor = (x,y) => {
      if(x > wp('0%') && x < wp('40%')) //1st third
      {
        if(y > hp('12%') && y < hp('29%'))
        {
            return 'green';
        } else {
            return 'orange';
        }
      } else if (x > wp('40%') && x < wp('62%')) { //2nd third
        if(y >= hp('12%') && y < hp('22%'))
        {
            return 'blue';
        } else if (y > hp('22%') && y < hp('30%'))
        {
            return 'grey';
        }
        else {
            return 'orange';
        }
      } else { //3rd third
        if(y > hp('12%') && y < hp('29%'))
        {
            return 'purple';
        } else {
            return 'crimson';
        }
      }
    }

会发生什么，我将拖动 1 个 Draggable，它会为该范围打印正确的颜色。我将拖动第二个 Draggable，它还将为该范围打印正确的颜色。然后，由于两者都被拖动（didDrag1 == true 和 didDrag2 == true），它们将打印(color1 + " | "+color2);

其中一个变量有时会为空。

我不知道这是怎么发生的。使用 React.useState()，变量甚至都不正确 - 将变量设置为确定的颜色似乎有进一步的延迟。

这里到底发生了什么？

【问题讨论】：

我肯定会使用useState。否则，您的变量 color1 和 color2 将在每次渲染时重新创建，您将丢失之前的值。
@LindaPaiste 我不知道每次渲染都会重新创建变量。很高兴知道

标签： javascript reactjs react-native npm expo

【解决方案1】：

React 状态需要一段时间才能更新。但我相信你仍然应该使用它们来保持你的颜色。

要检查这个“时间”，请创建一个将您的状态作为依赖项的 UseEffect 函数。

const [myState, setMyState] = useState(false);

const changeState = () => {
   console.log(new Date().getTime());
   setMyState(true);
}

useEffect(() => {
    console.log(new Date().getTime());
    console.log(myState);
}, [myState]);

参考：State and Lifecycle

【讨论】：

将添加到此。停止使用 var。