React JS Error:无效尝试解构非可迭代实例

Question

我有一个排序过滤器,它采用一个数组来填充选项.试图看到该选项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>
    )
}

Answer 1

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

const [ state, setState ] = useState();

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

const { data, isLoading } = useMyCustomFetchApiHook();

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

Answer 2

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

代替[]

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

使用{}

const {userInfo, setUserInfo} = useContext(userInfoContext); // {} can fix your issue

Answer 3

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

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

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

代替 ：（。

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

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

Answer 4

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. 修改/固定代码确实返回一个数组，因此可以设置变量。

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

Answer 5

我直接尝试给它分配一个空对象！

坏的 ：（

  const [state, setState] = {};

好的 ：）

  const [state, setState] = useState({});

Answer 6

问题是变量i，我将是事件object，用于i.target.value获取用户选择的内容，您用作的值的value另一件事，而不是使用，它会起作用，试试这个：textoptionsindex

const onChange = (i) => {
        const [text, by, order] = opts[i.target.value];
        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={i}>{text}</option>
                )}
            </select>
        </div>
    )

检查这个fiddle： https: //jsfiddle.net/5pzcr0ef/