React JS 错误：无效的解构不可迭代实例的尝试

IT技术 reactjs ecmascript-6 destructuring
2021-05-12 15:09:04

我有一个排序过滤器，它需要一个数组来填充选项。试图查看value等于数组中文本的选项，但在标题中出现错误：

Invalid attempt to destructure non-iterable instance

我需要将文本作为选项标签中的值传递，以便当用户更新过滤器时，正确的文本显示给用户所做的选择。

这是我的代码： 

function Sorting({by, order, rp}: SortingProps) {
    const opts = [
        ['Price (low)', 'price', 'asc'],
        ['Price (high)', 'price', 'desc'],
        ['Discount (low)', 'discount', 'asc'],
        ['Discount (high)', 'discount', 'desc'],
        ['Most popular', 'arrival', 'latest'],
        ['Most recent', 'arrival', 'latest'],
    ];

    const onChange = (i) => {
        const [text, by, order] = opts[i];
        refresh({so: {[by]: order}});
        /* GA TRACKING */
        ga('send', 'event', 'My Shop Sort By', text, 'Used');
    };

    return (
        <div className={cn(shop.sorting, rp.sorting.fill && shop.sortingFill)}>
            <Select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}>
                {opts.map(([text], i) =>
                    <Option key={i} value={text}>{text}</Option>
                )}
            </Select>
        </div>
    )
}
4个回答

我多次导致此错误，因为每当我编写一个useState钩子时，我会经常这样做，我习惯于使用数组来解构，如下所示：

const [ state, setState ] = useState();

但是我的自定义钩子通常返回一个具有属性的对象：

const { data, isLoading } = useMyCustomFetchApiHook();

有时我不小心写了[ data, isLoading ]而不是{ data, isLoading }，这会触发此消息，因为当您正在解构的对象是对象 {} 时，您要求从数组 [] 解构属性。

Invalid attempt to destructure non-iterable instance由于逻辑/编码错误而发生错误。以下javascript用于说明问题：

[aaa,bbb] = somefunc()

当somefunc()被调用时，它必须返回一个至少包含两个项目的数组。如果不是，则无法将结果 fromsomefunc()转换为aaaand 的值bbb。例如，代码：

[aaa,bbb] = { 'some': 'object'}

会产生这个错误。

所以这个错误实际上是一个 Javascript 编码错误，它发生在 React 代码中，它通过打印显示的错误来处理这种情况。请参阅MDN 以获取解构赋值文档。

正如@Mayank Shukla 在他的回答中所说，OP 问题的答案是修复这行代码：

const [text, by, order] = opts[i];

通过将其更改为： const [text, by, order] = opts[i.target.value];

根据我上面的描述，应该更清楚的是opts[i] ，OP 的原始代码 没有返回至少包含 3 个项目的数组，因此 javascript 运行时无法设置变量的值text，by并且order. 修改/固定的代码确实返回一个数组，因此可以设置变量。

在寻找这个问题的答案后，我意识到其他答案是正确的，我只是总结了错误消息的根本原因。

我也遇到过类似的error，老实说，我犯了一个非常愚蠢的错误，也许是因为编辑器自动完成。

我不得不使用useState钩子，但不知何故由于自动完成，我是这样写的。

  const [state, setState] = useEffect(defaultValue);

代替 ：（。

  const [state, setState] = useState(defaultValue);

希望它会有所帮助，因为error在这种情况下，在我花了一些时间对此进行调试之前，它根本没有帮助。

如果有人使用useState()钩子，并在使用上下文时面临上述问题。他们可以尝试以下解决方案。

代替 []

const [userInfo, setUserInfo] = useContext(userInfoContext);

利用 {}

const {userInfo, setUserInfo} = useContext(userInfoContext); // {} can fix your issue
其它你可能感兴趣的问题
上一篇Prima PETG 的第一层粘合不良和桥接问题 下一篇Makerbot Replicator 2 在预热 hbp 后重新启动