全局变量在我的React Native应用程序中自己改变

Question

正如你可以在标题上读到的那样，我遇到了一个变量的问题，该变量在应用程序执行过程中自我改变。自我改变的变量是currentlot在下面的代码中:

var currentSlot=0;
const setCurrentSlot = () => {
currentSlot++;
};
const onSelectColor = ({ hex }) => {
switch(currentSlot) {
case 0:
setcolor0(hex);
break;
case 1:
setcolor1(hex);
break;
case 2:
setcolor2(hex);
break;
case 3:
setcolor3(hex);
break;
case 4:
setcolor4(hex);
break;
case 5:
setcolor5(hex);
break;
case 6:
setcolor6(hex);
break;
case 7:
setcolor7(hex);
break;
case 8:
setcolor8(hex);
break;
case 9:
setcolor9(hex);
break;
default:
Alert.alert('Maximum number of colors reached (10). Tap color to delete.');
}
};

此外，我已经实现了一个颜色选择器，从中我可以获得对颜色的访问，并且我希望后者显示在我在侧面显示的视图中。最终，View组件中总共会有10种不同的颜色(每种颜色都显示在其较小的视图中)。

我们的想法是遍历"微型视图"由于变量currentlot并将它们的颜色设置为颜色选择器给出的颜色当我点击&;add &;按钮。

然而，当currentlotsetcurrentlot ()正确递增(本身由"Add"触发)按钮)，它迅速下降到它的初始值(0)，我似乎不知道为什么，因为我显然没有对它做任何其他事情。

有人有什么主意吗?

谢谢你的帮助!

我试着改变我的方法，使用if…Else语句，或者切换…我也试过把函数分成不太复杂的，但是没有什么效果。

Answer 1

全局变量是一种反模式，你不应该使用它们，尤其是在React应用程序中管理状态。有很多原因，但这里可能很重要的一点是，它们根本不是React状态的一部分，这意味着改变全局变量不会触发重新渲染，所以React显示的内容将与你期望的不同步，直到其他事情导致你的应用程序重新渲染。

这个问题没有足够的线索来找出问题是什么。如果你编辑你的问题，以显示例如完整的组件，我们可能能够修复它(并请在所有未来的问题上这样做关于SO!)，但在我看来，这真的是一个XY问题，它将是最有成效的只是重构朝着更好的东西。

---

你提到的首要问题是:

[我]实现了一个颜色选择器，从中我可以获得对颜色的访问，我希望后者被显示到一个视图中，我显示在侧面

理想情况下，我们不会有一个单独的函数来更新每个先前选择的颜色:相反，我们会有一个状态，他们都读取。比如:

function usePreviouslySelectedColorsState() {
const [previouslySelectedColors, setPreviouslySelectedColors] = useState([]);
return useMemo(() => ({
previouslySelectedColors,

addToPreviouslySelected(hex) {
setPreviouslySelectedColors((prev) => {
return [...prev, hex]
// could also do "return [...prev, hex].slice(-10)" instead
// to only ever keep the last 10
};
}
}), [previouslySelectedColors]);
}

现在，我们可以在根组件中使用这个状态，既可以在选择新颜色时使用，也可以在渲染现有的先前选择的颜色时使用:

function ColorPickerWithPreviouslySelected() {
const {
previouslySelectedColors,
addToPreviouslySelectedColors
} = usePreviouslySelectedColorsState();
return <View>
<ColorInput onColorSelected={addColorToPreviouslySelected} />
<PreviouslySelectedColors hexCodes={previouslySelectedColors} />
</View>;
}

其中PreviouslySelectedColors看起来像:

function PreviouslySelectedColors({hexCodes}) {
return <View>
{
hexCodes.map((hex) => <ColorThumbnail hex={hex} />)
}
</View>;
}

---

除了修复状态管理，使其由React驱动并使用数组之外，这里还显示了其他一些模式，我希望它们将来对您有所帮助:

• 理想情况下，每个组件单独应该只做一件事，并且尽可能简单。这意味着将来很容易重用组件，并将它们组合成新的东西。例如，这里的PreviouslySelectedColors组件只是在给定十六进制代码数组时渲染彩色缩略图——你可以在应用程序中完全不同的地方使用这个组件，用完全不同的东西驱动那个状态，它仍然会工作得很好。
• 此外，这意味着在可能的情况下拆分更多组件。你可以让输入的颜色和之前显示的颜色都在一个大的组件中，但把它们分开会让每个组件更容易理解，就像我说的，总的来说更容易组合，因为现在它们不依赖于彼此或一种特定的状态。
  • 对此通常有用的是"控制反转";—不是让组件直接更新一些东西(在这种情况下，也许颜色输入可以直接更新之前的颜色列表)，而是让控件反转，这样颜色输入根本不知道那个列表，只有一个"事件";函数，它调用每当它改变，例如我们的onColorSelected道具在我的例子。这意味着父组件可以根据需要自由地组合函数，而不必将逻辑直接绑定到组件。