useState被多次初始化

Question

让我们以某种对象数组为例，例如：

    let arrayTemp = [
    {type: {id: 1}},
    {type: {id: 2}},
    {type: {id: 3}},
    {type: {id: 4}}
  ];

接下来，我们创建一个组件，将这个数组作为参数传递给它。

<StubGreat array={arrayTemp}/>

在组件中，创建一个钩子并按如下方式初始化它：

const [tag, setTag] = useState(array[0].type.id);

现在，我们开始逐个删除数组中的元素。您可以使用pop()函数删除它。当我们删除数组中的最后一个元素时，我们得到了以下错误：Uncaught TypeError:无法读取StubGreat (StubGreat.js:14:1)中未定义的属性(读取'type')

见鬼这是怎么回事？组件的初始化必须进行一次，为什么未定义的值没有设置，但出现了错误？怎么解决这个问题呢？

Answer 1

到底是怎么回事？

您正在尝试在一个值( undefined )上引用undefined。根据描述，父组件控制arrayTemp并将其作为支柱传递给StubGreat。每次道具发生变化时，StubGreat都会重新呈现。

想必(通常)对useState的调用是组件首先要做的事情之一。因此，假设您有一个函数组件，这是其中的第一行：

const [tag, setTag] = useState(array[0].type.id);

当函数组件呈现时，函数本身将被调用。

现在，是时候离开反应域了，仅仅从JavaScript的角度来思考这个问题。因为这里就只有这些。正在发生的是一个函数被调用，一个空数组被传递给它，代码对这个空数组所做的第一件事就是尝试在空数组的第一个元素上读取一个名为type的属性。

这会产生所观察到的错误，因为空数组没有第一个元素。

无论useState在内部做什么，或者内部如何反应，识别状态表示并计算出哪些可能需要重新计算或重新呈现，所显示的JavaScript代码都试图取消引用undefined值。这是个错误。

事实上，当错误发生时，useState甚至不会被调用。传递给函数的值必须先解析，然后才能用该值调用函数。解决这个值就是产生错误的原因。

根据您正在构建的内容以及您希望它的行为方式，您可以采取多种方法。(我们都不知道。)例如，您可以提供某种类型的默认值：

<StubGreat array={arrayTemp.length > 0 ? arrayTemp : [{type:{}}]}/>

或者你可以有条件地取消引用：

const [tag, setTag] = useState(array.length > 0 ? array[0].type.id : null);

或者您无法使用空数组呈现组件：

{ arrayTemp.length > 0 ? <StubGreat array={arrayTemp}/> : null }

但是，您希望系统在出现空数组时能够运行，这取决于您。但是，对空数组不能做的一件事是取消引用它的第一个元素。